this is my first post.

I am trying to find a resource to help me out with my issue but to no avail and thus I decided to reach out here.

I am wondering how do people on their next.js projects handle things like for example navbar menus and ISR?

I have a website that consists of thousands of products/pages and I am trying to find a way to keep a common menu in all these pages synchronized.

So far, I have included the getInitialProps method in the _app.js that performs an api call to retrieve the header menu and the footer menu and returns them as props. Inside the _app.js I have a and a component to which I pass the menu props retrieved from the getInitialProps. This way I have one point of reference from which I retrieve the menu and thus I don’t have to include it in every page route/dynamic route.

Now, with this method, I face a problem during the revalidation process since different route types have different revalidation timers. I have pages where the revalidation could be 24 hours since they rarely change and other pages can have 10 mins since their content gets more often updated. This results in users having different menu items as they navigate through the website when a menu has been updated.

This gets even worst with the new on-demand revalidation feature to which I am trying to migrate. Using the on-demand revalidation, I removed the revalidation timers to avoid unnecessary API calls. After implementing the revalidate API as mentioned in the documentation and including webhooks to my Laravel backend application now the problem I have is obviously that revalidating a specific slug, updated the menu and the rest of the website has the previous menu.

I know I am writing a lot here but I am trying to explain the issue in as detail as possible.

So, to the point then. How do you guys handle such situations? I read on a thread somewhere that some people go about retrieving the menu client side. But isn’t this harmful to SEO? Again, sorry for the wall of text. Very curious to hear your approaches.