gatsby - Gastby Homepage Components Double Rendering on all pages only in Prod (not in local / dev)

Question

I am building a Gatsby site. Everything works fine in Development / Local but when the site gets deployed to Netlify the homepage components below the navbar are getting rendered twice on the homepage and also on all other pages.

When I inspect the prod page, I see everything inside is also getting rendered out side of the

I cross-checked and and Layout has Navbar. Also, this issue is not happening in local. Also on every page, only the homepage components are double rendering, individual page components are not double rendering.

Gatsby Homepage Double Rendering

Layout Component

const Layout = ({ children }) => {
  return (
    <RecoilRoot>
        <KNavbar/>
        <KSideNav />
        {children}
        <Footer />
        <GoTop scrollStepInPx="100" delayInMs="10.50" />
    </RecoilRoot>
  )
 }
 export default Layout

Home Page - Index.js

   const Home = ({data}) => {  
   return (
   <Layout>
    <div className="App">
      <Helmet>
        <title>Keylent Home Page</title>
        <meta name="description" content="Keylent Home Page" />
        <meta name="keywords" content="Keylent, keylent" />
      </Helmet>
    </div>
    <MainBanner />
    <OurServices />
    <RecentProjects />
    <Testimonials />
    <Partner />
    <OurBlog />
    <ProjectStartArea />      
   </Layout>
   )
  }

Any idea why production has this behavior?

Thanks

--- Code for KSideNav ---

import React, {useState} from "react";
import styled from 'styled-components';
import { Link } from "gatsby";
import { StaticQuery, graphql } from "gatsby";
import Logo from "./Logo";


 //https://codepen.io/davidmunro/pen/xxxeoOo?editors=0010
 const SidebarNav = styled.nav`
  background:#ffffff;
  width: 100vw;
  height: 90vh;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 81px;
  left: ${({ sidebar }) => (sidebar ? '0' : '-102%')};
  transition: 550ms ease-in-out;
  z-index: 9999;
`;

const SidebarOverLay = styled.div`
  width: 100vw;
  height : 100vh;
  position : absolute;
  top : 0;
  left : 0;
  left: ${({ sidebaroverlay }) => (sidebaroverlay ? '0' : '-102%')};
  background-color : rgba(0,0,0,0.7);
  z-index : 9998;
  transition: 550ms ease-in-out;
`;

 const Sidebar = () =>{
 const [sidebar, setSidebar] = useState(false);
 // const [sidebaroverlay, setSidebarOverLay] = useState(false);

 const showSidebar = () => {
 setSidebar(!sidebar);
 // setSidebarOverLay(!sidebaroverlay);
 }
  const [collapsed, setCollapsed] = useState(false);
  const showCollapsed = i =>{
    if (collapsed === i) {
      setCollapsed(null);
    }
    setCollapsed(i);
  }
  const [collapsedTwo, setCollapsedTwo] = useState(false);
  const showCollapsedTwo = key =>{
    if (collapsedTwo === key) {
      setCollapsedTwo(null);
    }
    setCollapsedTwo(key);
  }

    React.useEffect(() => {
      let elementId = document.getElementById("sideNavbar");
      document.addEventListener("scroll", () => {
        if (window.scrollY > 0) {
          elementId.classList.add("is-sticky");
        } else {
          elementId.classList.remove("is-sticky");
        }
      });
      window.scrollTo(0, 0);
    });
  return (
    <StaticQuery
    query={graphql`
      query KSidebarNav {
        allMarkdownRemark(
         ...
      }
    `}
    render={(data) => (             
    <>
   <div id="sideNavbar" className="navbar-area navbar-style-two         sidenavbar">
            <div className="tarn-nav">
                <div className="container">
                    <nav  className="navbar  navbar-expand-lg navbar-light">
                    <Link 
                        to="/" 
                        className="navbar-brand"
                    >
                            <Logo />
                        </Link>
                        <button className="navbar-toggler" type="button" onClick={showSidebar}>
                        <span className="navbar-toggler-icon" />
                        </button>
                    </nav>
                </div>
            </div>
       </div>
     <SidebarNav sidebar={sidebar}>
        <ul className="list-group w-100 sidebar-links mb-4">
              
      {data.allMarkdownRemark.edges[0].node.frontmatter.navbaritem.map((item, i) => {
            return (
            <>                   
                 <li className="list-group-item" key={i} onClick={() => showCollapsed(i)}>
                   {item.navbaritemname}
                   <span className="link-icon">
                   {(() => {
                      if (item.navmenuitem){
                          return (
                            <>
                               {collapsed === i  ? <i class="bx bx-minus"></i> : <i class="bx bx-plus"></i>}
                            </>
                          )
                      }
                      
                      return null;
                    })()}
                   </span>
                   <div className="clear-both"></div>
                   {collapsed === i ? (
                      <ul className="list-group sidebar-linksTwo">
                      {item.navmenuitem &&
                       item.navmenuitem.map((itemData, key) => {
                         return (
                           <>
                               <li className="list-group-item" key={key} onClick={() => showCollapsedTwo(key)}>
                                 <Link to={itemData.navmenuitemURL}>
                                   {itemData.navmenuitemname}
                                 </Link>
                                 <span className="link-icon">
                                 {(() => {
                                   if (itemData.navsubmenuitem){
                                       return (
                                         <>
                                            {collapsedTwo === key ? <i class="bx bx-minus"></i> : <i class="bx bx-plus"></i>}
                                         </>
                                       )
                                   }
                                   
                                   return null;
                                 })()}
                                 </span>
                                 <div className="clear-both"></div>
                                 {collapsedTwo === key ? (
                                     <ul className="list-group sidebar-linksThree">
                                      {itemData.navsubmenuitem &&
                                      itemData.navsubmenuitem.map((itemDataTwo, keyTwo) => {
                                        return (
                                          <>
                                              <li className="list-group-item" key={keyTwo}>
                                                <Link to={itemDataTwo.navsubmenuitemurl}>
                                                  {itemDataTwo.navsubmenuitemname}
                                                </Link>
                                              </li>
                                          </>
                                        );
                                      })}
                                   </ul>
                                  ) : null}
                               </li>
                           </>
                         );
                       })}
                     </ul>
                    ) : null} 
                 </li>
               
                {/* <SidebarLink to="#" key={index} onClick={item.subNav && showSubnav}>
                  <div>
                    {item.icon}
                    <SidebarLabel>{item.title}</SidebarLabel>
                  </div>
                  <div>
                    {item.subNav && subnav ? item.iconOpened : item.subNav ? item.iconClosed : null}
                  </div>
                </SidebarLink>
                {subnav &&
                  item.subNav.map((itemData, key) => {
                    return (
                      <>
                          <DropdownLink to={itemData.path} key={key}>
                            <div>
                            {itemData.icon}
                            <SidebarLabel>{itemData.title}</SidebarLabel>
                            </div>
                            <div>
                              {itemData.subNavTwo && subnavtwo ? itemData.iconOpened : itemData.subNavTwo ? itemData.iconClosed : null}
                            </div>
                          </DropdownLink>
                      </>
                    );
                  })} */}
            </>
          );
          })}
          </ul>
        {/* </SidebarWrap> */}
      </SidebarNav>
      {/* <SidebarOverLay sidebaroverlay={sidebaroverlay} onClick={showSidebar}>
        <button className="navbar-toggler sidebar-close" type="button" onClick={showSidebar}>
          <span className="navbar-toggler-icon" >X</span>
        </button>
      </SidebarOverLay> */}
    </>
    )}
/>);
}

export default Sidebar;

question from:https://stackoverflow.com/questions/65885778/gastby-homepage-components-double-rendering-on-all-pages-only-in-prod-not-in-lo

Answer 1

I don't know why you are using <RecoilRoot> component in the Server-Side Rendering but if you are using it there, remove it from your <Layout> to avoid duplicities.

const Layout = ({ children }) => {
  return (
    <>
        <KNavbar/>
        <KSideNav />
        {children}
        <Footer />
        <GoTop scrollStepInPx="100" delayInMs="10.50" />
    </>
  )
 }
 export default Layout

Replace it for an empty tag (<>, or fragment) to keep the structure.