How to lazy load correctly in App Router?
Answered
mike.ciesielka posted this in #help-forum
We're in the process of migrating to App Router and our Pages Router implementation makes use of dynamic imports to reduce the size of our bundles. We're running into a bit of a hitch trying to maintain the existing behavior in client components that seems to be related to some rendering behavior described in the docs: https://nextjs.org/docs/app/building-your-application/rendering/client-components#full-page-load.
We think the following is happening:
1. The static HTML preview is built as described at the link above. The lazily-loaded component is visible at this point.
2. When the client component itself renders at first on the client, it doesn't have the component in the bundle so it fetches it. The lazily-loaded component isn't visible at this stage (annoying because it was visible above).
3. The lazily-loaded content appears once it's been dynamically fetched.
There's nothing interesting about the way we're performing the imports. The case I'm looking at specifically is best described by ComponentB in these docs, where the condition is based on some streamed data.
It feels like we're using dynamic imports in the most straightforward way, so it feels odd that we'll need to tack on an
We think the following is happening:
1. The static HTML preview is built as described at the link above. The lazily-loaded component is visible at this point.
2. When the client component itself renders at first on the client, it doesn't have the component in the bundle so it fetches it. The lazily-loaded component isn't visible at this stage (annoying because it was visible above).
3. The lazily-loaded content appears once it's been dynamically fetched.
There's nothing interesting about the way we're performing the imports. The case I'm looking at specifically is best described by ComponentB in these docs, where the condition is based on some streamed data.
It feels like we're using dynamic imports in the most straightforward way, so it feels odd that we'll need to tack on an
{ ssr: false } to most of our usage of them to resolve this (https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr). Is there a different way to think about / resolve this issue? Any insights would be helpful.1 Reply
Looks like this is resolved in next@14.2.5
Answer