Stuck on an issue?

Pardon me coming back at this after so long. Here’s an update incase anyone comes across this.

This is an issue with the nextjs framework itself.

Here’s an ongoing discussion on Github Issues

This slow routing issue has nothing much to do with this or any starter for that matter. I tried making one from scratch but faced the same issue.

My Use Case/Context

I was making some network requests (for global data such as header/footer navigation items) in a getInitialProps method at _app.js so that those data can be reused across all the pages. But not so fast.

According to Nextjs Docs as of writing this says: (May be this will change in future)

- Adding a custom getInitialProps in your App will disable Automatic Static Optimization in pages without Static Generation.
- App currently does not support Next.js Data Fetching methods like getStaticProps or getServerSideProps.

So, How I solved it?

• I used file-based local data caching mechanism to speed up the slow-routing.
• An article on the Caching Solution by Flavio Copes

Here’s a speed comparison after applying the solution. Left - After Caching Right - Before Caching

There are other solutions discussed in the github discussion too but the above one worked in my case. So hope this helps.

yeah @doingandlearning @GuilleAngulo and I were chatting about it a bit in my discord https://spacejelly.dev/discord

so a little context, we’re currently using getInitialProps in a custom _app.js to grab globally available data as there really isn’t any type of global data layer mechanism to do that right now, beyond adding those requests on each page in something like getStaticProps, and i guess setting up a new context or pass those as props each time, which feels like the wrong way to handle it

part of the downside is this is typically discouraged, as it automatically disables some optimizations. the reason we’re thinking it’s okay here is because the app ends up being statically compiled anyways, so this is at no cost to the user

now i haven’t run any tests to confirm this but i believe that to be the reason why it’s slow page to page, because that ends up making all of those requests every time a new page loads, and there are a few in there to get all the relevant WP data

i think a big thing that currently isn’t working properly (or might just not be set up) is a caching mechanism for those requests. each time the apollo client is being used, it seems to be creating a new instance, which im guessing means it’s also not doing any sort of caching

that wasn’t the intent but it didnt seem to work as expected

@GuilleAngulo said he’s going to poke at it a bit and see if he can figure anything out. im not a graphql expert but trying to also do a little digging around to see if i can find anything that make ssense as to how to properly set up apollo to take advantage of caching

this article for instances sets up the client a little differently, could help: https://www.apollographql.com/blog/getting-started-with-apollo-client-in-next-js/

More info from their docs: https://www.apollographql.com/docs/react/caching/cache-configuration/

if we can’t seem to figure something out i can reach out to people over there and see if they have any recs