title: Static header and footer in Express JS
body: <p>I am working with express js 4.14.0 and handlebars js 4.0.6. My view folder structure is like</p>
  
  <pre><code>view
     Layout.hbs
     Layout Folder
      - Main.hbs
    Partials Folder
      -Header.hbs
      -Footer.hbs
      -Page.hbs
   Index1.hbs
   Index2.hbs
  
  app.engine( 'hbs', express_hbs( { 
    extname: 'hbs', 
    defaultLayout: 'main', 
    layoutsDir: __dirname + '/views/layouts/',
    partialsDir: __dirname + '/views/partials/'
  } ) );
  </code></pre>
  
  <p>Main.hbs where the page starts to render initially is</p>
  
  <pre><code>&lt;div class="bodyContent"&gt;
          &lt;header&gt;{{&gt; header }}&lt;/header&gt;
          &lt;div class="container-fluid body-content"&gt;
              {{{body}}}
          &lt;/div&gt;
          &lt;footer&gt;{{&gt; footer }}&lt;/footer&gt;  
      &lt;/div&gt;  
  </code></pre>
  
  <p>Initially Header, Footer and Page will get displayed through Index1.hbs page. When I am getting through to Index2.hbs page, Header and Footer is rendering again. It leads to flickering issue in header and footer when navigating between pages. How i can design Header and Footer like shared layout between the pages in express js using handlebars? How to overwrite the body content alone?</p>