Can I personalize entirely on the server and ship zero extra client JS?
My performance budget is strict and I enumerate everything that touches it. Constraints: no new client runtime on the critical path, no extra kilobytes in the main bundle, LCP element must stay server-rendered.
So the question is whether I can have Server Components resolve all the personalized content with nothing added to the client bundle for it, or whether a client runtime always has to come along
2 answers
Yes. If you resolve with server fetchContent inside Server Components, the content is resolved on the server and nothing for that content ships to the client. The resolved markup lands in the initial HTML and there is no accompanying client bundle for it.
The weight and the flicker only show up when you reach for the client hooks in a 'use client' component, because those pull a runtime and resolve after load. There is a measurement of what that client footprint looks like in the croct client bundle size in Next.js.
Small caveat so you plan it right: server-only is the pattern for content, but the recommended shape overall is hybrid. Resolve content on the server, and only drop to a client component where you genuinely need interactivity, like a widget that reacts to clicks. That keeps the content path free of client JS while still letting the interactive bits be interactive.
The tradeoffs of each side are laid out in server fetch versus client hooks, and the hybrid pattern.