Open zxti opened 11 months ago
+1 I have noticed this issue as well. In a situation where client components are conditionally rendered based on some server side logic, all client components are bundled and sent to the client
Another +1. I've been having some problems with this. Here's just a short example:
page.tsx
import { A } from "./A";
export default async function Page() {
return(
<>
<A data={[{ type: 'B' }, { type: 'B' }]} />
</>
);
}
A.tsx
import { B } from "./B";
import { C } from "./C";
type Props = {
data: {
type: string
}[]
}
export function A({ data }: Props) {
return data.map(item => (
<>
{
item.type === 'B'
? <B />
: <C />
}
</>
))
}
B.tsx
'use client';
export function B() {
return (
<div>$$$B</div>
);
}
C.tsx
'use client';
export function C() {
return (
<div>$$$C</div>
)
};
Despite page.tsx
and A.tsx
being server components, and only being passed data to render <B />
, it still bundles the <C />
component and delivers it to the client.
Link to the code that reproduces this issue
https://github.com/zxti/next-bundletest
To Reproduce
Current vs. Expected behavior
Current: sends both Cli1 and Cli2.
Expected: sending either Cli1 or Cli2 but not both.
The server component just renders this:
From https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md
Have also seen various other mentions of this in interviews etc. (can't remember where exactly), but I cannot produce the advertised behavior.
Verify canary release
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router
Additional context
No response