Global element and headless

[kevinkashou]

Hello,

I am trying to figure out what is the best way to not make a call for header (Main navigation) and Footer on every route change. The data is the same across the entire site. I can't seem to wrap my head around making it persist and not rerender the header and footer every time.

Is there a built in set up with in next to make that happen? Or do I need to have that data stored in like context and make the call just once as soon as the user enter the site?

Any input would be greatly appreciated.

[leerob]

Could you share an example?

Based on your question, this is what I'm hearing:

• You are fetching data in the header and footer
• Every time you change routes, it is fetching data
• Data is the same across the site

Could you try:

• Moving the header/footer to _app.js to share across every page
  • Use memo if you only want to re-render when props change
  • Use SWR if you want to refresh data in the background

[kevinkashou]

@leerob - Yeah you got all my points mentioned above correct.

As it currently stand:

I am making a getServerSideProps which will get two endpoints (header/footer data, and the page data) in the [...index].jsx file, this function runs every page route change.

Base from what you mentioned moving the header and footer component and api call to _app.js, do I use getServersideprops function in there so that it makes the call only one time?

I would provide an example but the code and data I am using is all confidential :/

[leerob]

Do you absolutely need to do SSR? Using getServerSideProps at the _app level would prevent you from having any static routes. If you are okay with that, then continue. Otherwise, I would consider serving a static "shell" or loading state and using a library like SWR to fetch data client side.

[leerob]

If you're worried about re-rendering, then check out React.memo. If you're worried about calling your API too much, then consider caching.

[kevinkashou]

@leerob - Sorry what do you mean by static routes? It needs to be SSR for SEO purposes.

I am using the approach of React.memo and it doesn't reload the footer and navigation so that def helps. Thanks.

[leerob]

By static, I mean utilizing Next's SSG functionality. This will also be good for SEO. You likely will only need SSR if your data changes frequently (i.e., every request).