Dynamic Route Challenges: Preventing Unnecessary Bundle Loading

[haapti]

Summary

Im using dynamic routes in order to do internationalization. Some regions has region specific RSC components on a home page. Code splitting seems to work fine according to bundle analyzer results and all components goes into their own bundles. The issue is that all of these bundles gets loaded into client regardless of whether the components are in use on specific region.

App dir structure

All routes are using prerendered as static HTML (SSG). Im not using dynamic rendering or streaming.

• layout.tsx
• [locale]
  • layout.tsx
  • page.tsx

Page.tsx logic

if (region === "en") return <ComponentA />
if (region === "fi") return <ComponentB />

Issue

<ComponentA /> and <ComponentB /> bundles are loaded into client on both /en and /fi dynamic routes.

I have tried so far

• Dynamic importing https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#importing-server-components
• Defining locales in generateStaticParams https://nextjs.org/docs/app/api-reference/functions/generate-static-params
• Suspense Boundaries

Not sure if it is possible to have Next.js to load only certain bundles into client depending on what is in dynamic route, even if you have pre-defined dynamic route segments beforehand.

[Zelenovskiy94]

I've faced the same issue
Any ideas to resolve it?

[rohitpotato]

@leerob Is this even possible, my team has been struggling with this for a quite a while now. We have a ecommerce site, which receives a lot of traffic daily (surpassing 5 million hits daily), and we want really want to leverage this feature. Is there a way, that the server itself can send the required bundle, because dynamic imports would mean another roundtrip from the client to the server.

Can you please take a look at this? I am not sure if there's already an open issue being tracked somewhere. We are on version 14.2.5.