Getting data for the page template

[JonCognioDigital]

Hi all,

Most of the pages on my site (probably all) will share the same header and footer. so my plan is to create a masterTemplate component which will be used on all pages, the page content being inserted as props.childern.

The template contains data from a CSM (category links etc.) so am I going to need to go to the CMS in the getServerProps (or getStaticProps) function of every single page and pass them down to the template?

Ideally I'd get the data inside the template component and if the template doesn't change when the user navigates between pages then the data would only be fetched ne. However this isn't possible with next because data can't be fetched in child component (not with SSR anyway).

What do other people do, get all data in every page? Or maybe cache it in the browser?

[rafaelalmeidatk]

The template contains data from a CSM (category links etc.) so am I going to need to go to the CMS in the getServerProps (or getStaticProps) function of every single page and pass them down to the template?

Yeah that's basically it. To avoid repeating too much code you can create the function that will fetch from the CMS in the MasterTemplate component and use it in a page like this:

// pages/example.js

import MasterTemplate, { getMasterTemplateProps } from '../components/MasterTemplate'

const ExamplePage = ({ templateProps }) => (
  <MasterTemplate {...templateProps}>
    page content
  </MasterTemplate>
)

export default ExamplePage

export async const getServerSideProps = () => {
  const templateProps = await getMasterTemplateProps()

  return {
    props: { templateProps },
  }
}

If you don't need any more props you could make it even shorter with this:

// pages/example.js

export async const getServerSideProps = masterTemplateServerSideProps;

[JonCognioDigital]

Thanks, this is a great idea to make the code tidier, but it just seems such a shame that when navigating the site in the browser we have to make a trip to the CMS each time even though the data in the template doesn't change.

I guess I could just write a proxy function to get the data which stores it on "window.templateData" or something like that so that it can look there before re-fetching it. That would mean that it never went back to the CMS unless the user refreshed the page so it could get stale, or I could put a timeout on it maybe? A very lazy caching system.....

[rafaelalmeidatk]

Oh if all the pages are going to use this template, you can use a Custom App to avoid repeating it in all the pages. This will not solve the fetch on route change tho.

My suggestion to solve it is exactly what you said: a value in the window that will be utilized instead of the request if it is defined.

[JonCognioDigital]

That may be a better idea I'm just wary of this....

"Adding a custom getInitialProps in your App will disable Automatic Static Optimization in pages without Static Generation."

Can we us getStaticProps in a custom app?

[rafaelalmeidatk]

Custom app only supports getInitialProps at the moment. It will disable the Auto Static Optimization but if you explicit add getStaticProps to the pages they will still be statically generated

[JonCognioDigital]

Actually the more I think about this the harder it's going to be to get this to work with statically generated content.

Let's say I need to make 5 calls to the CMS to get the various content that is used in the template and I have 200 statically generated page (not to mention the hundreds of products in the catalog) that means if I staticaly generate them at build time then I have to make 1000 calls to the CMS to generate them all.

If I use incremental regeneration (fallback:true, revalidate:60 etc.) then they will try to regenerate themselves on the first visit and in the background so that's 5 calls to the CMS every time.

Because static generation happens at build time or in the background (also on the server) then I can't cache the template browser in the browser. As the user moves from page to page in the browser they'll get a series of statically generated pages anyway.

So am I right in thinking that if I want SSG with regeneration then the only way it's going to work is to get all the page and template data every time a page is generated?

Also, if the template changes and not all pages are regenerated straight away could they become out of sync, so the phone number in the header could be different on pages A and B until both are removed from the cache?