Hey everyone.
I'm working on a new website that uses NextJS, Prismic and Vercel.
I noticed one big issue that is related to how slices are dynamically loaded. For example, the Hero slice, which is the top section of my website is lazy loaded like this inside index.ts under /slices:
hero: dynamic(() => import("./Hero")).
To describe the problem, I first open the front page (/), then I wait for NextJS to pre-fetch the subpages (all next/link that are visible on the screen), such as /about-us. Now when I click on the About us link, it doesn't initially render any of the slices, and the page is pretty much empty until the slices have been lazy loaded. I debugged this by opening the frontpage with no network throttle, then I used slow 3G and clicked on the link after it had been prefetched by NextJS.
If I import the hero section without using dynamic, then it shows up fine, but the rest of the slices are not visible until they have been lazy loaded.
This doesn't seem to affect when you reload the page, but only when you click on a link that has the underlying page prefetched by NextJS.
So now I'm wondering if I should always replace what slicemachine generates inside slices/index.ts, or if there's a setting to disable lazy loading slices? Perhaps this might as well be a NextJS bug, but I'm not sure. I'm using the latest NextJS (13.4.3), prismicio/client, prismicio/next and prismicio/react.
Thanks.