Why import client component in server component but not return it as part of render still increases the SSG first load JS size?

[TrustyTechSG]

Summary

Hi, for example like below page.js (Server component)

// Not going to increase SSG size no matter now many server component been imported
import OtherServerComponentA;
import OtherServerComponentB;
// Increases SSG size even page mode value is not "CA"
import ClientComponentA;

export default function Page({ mode }) {
  switch(mode) {
     case "SA": return <OtherServerComponentA />;
     case "SB": return <OtherServerComponentB />;
     case "CA": return <ClientComponentA />;
  }
}

To my understanding the SSG size of above page.js should based on page props "mode" value, so the final SSG page size should only be determined by one of the return component only. But I notice this is only true if all import component are server component, if import component is client component, then it will increases the page.js first load JS size. Am I doing something wrong? Big thanks.

Additional information

No response

Example

No response

[icyJoseph]

I think it is because the client component bundle is included as a potential branch of the code. In other words, there doesn't seem to be code elimination based on potential runtime values. What decides mode's value?

Maybe you could do dynamic loading of ClientComponentA to cut down the JS required by the first load.

[TrustyTechSG]

hI @icyJoseph , thank you for the answer. Sorry, I should put it more clearly.

For example I have a server component page below:

import OtherServerComponentA;
import OtherServerComponentB;
import ClientComponentA;

export default async Page({ params }) {
  const response = await fetch(`xxxxxxxx/${params.host}`, {
    next: {
      tags: [params.host],
    },
  });
  const { templateId } = await response.json();

  switch(templateId) {
     case "SA": return <OtherServerComponentA />;
     case "SB": return <OtherServerComponentB />;
     case "CA": return <ClientComponentA />;
  }
}

To my understanding, because it is server component and the page code only run once during SSG (until revalidate), and even the fetch response cached by NextJS during SSG, then adding additional case should not effect the SSG page size. and I notice this is true if the import component all server component, I have a huge switch case with more than 100 server components. remove them all or add them back will not effect the First load JS build size. but once I add a client component as another "case", SSG size increases accordingly.

Before add client component case:

Remove 50+ server components imports/case: (JS size no changes)

Just add 1 client component import/case: (JS size increases accordingly)

[icyJoseph]

Hi.

I understand what you mean. I think the issue here might be with expectations.

I don't think this is an impossible feature to ask for, but it has some gotchas for sure. Let's image it is possible. When should we drop the ClientComponentA JS from the bundle:

• There's the static analysis done before we build the app,
• There's the bundling process
• The building the app process

And I think you can start to see that, when you build the page, you have already bundled together, everything you need to do that. So even if during pre-rendering, the client component path is not touched, you are not shedding bundles at that point, you are creating HTML/JS/CSS and possible JSON/RSC data to drive a page.

However, if during bundling a path is not used, then the bundler could drop it. Sometimes the static analysis can figure out that code can be dropped based of the typeof window for example, https://overreacted.io/how-does-the-development-mode-work .

[pawelblaszczyk5]

I'm thinking that's some bundling Webpack voodoo magic going on right there. If I just create a client component and use it in two pages, its code will be duplicated between these pages chunks instead of a separate chunk with component. That's kinda strange and unexpected for me 🤔 Am I missing something here?

Edit: Even if I use dynamic for them, both are included in the JS chunk of a given page

Code example:

import dynamicNext from "next/dynamic";

export const dynamic = "force-dynamic";

const ClientA = dynamicNext(() =>
  import("#/app/client-a").then((mod) => mod.ClientA)
);

const ClientB = dynamicNext(() =>
  import("#/app/client-b").then((mod) => mod.ClientB)
);

const Home = () => {
  return Math.random() > 0.5 ? <ClientA></ClientA> : <ClientB></ClientB>;
};

export default Home;

And same thing even if I create separate server components with ClientA/ClientB and render them conditionally. Everything gets bundled together anyway, it doesn't make sense this way 😅

Edit2: It goes even further 😄 Even if I force Webpack with voodoo config splitChunks magic to split these components into separate chunks - RSC still inlines links to both of them in the payload and they end up being loaded