server components
React Server Components run outside the client bundle and can prepare UI close to server data.
Use this when A data-heavy page sends unnecessary code or sensitive data to the browser.
without the term
“This Next.js page ships a big chart library and maybe our API key to the browser. Can you keep the data fetching on the server and only send the interactive part to the client?”
with the term · How do you ask a model for server components?
Keep this data read in a Server Component and isolate the interactive control. Inspect the client bundle and verify no server-only dependency or secret crosses the boundary.
What is server components?
Server Components render on the server and send UI to the client without their code. Components marked 'use client' handle browser interaction, and only serializable props cross between them.
Why does server components matter when vibe coding?
Marking a broad module boundary as client code can pull unintended dependencies into it.
How do you do server components?
Keep server-only dependencies protected and pass only the data allowed across the client boundary.
What goes wrong with server components?
Confusing the module dependency boundary with every visual descendant in the rendered tree.