252
server components
also RSC, use client
A server component ships no client JavaScript. It cannot use state or effects.
What is server components?
A server component renders on the server into a payload. It may read the database. It may not use useState, effects, or browser APIs. A client component is a boundary marked by the framework. Props that cross that boundary must be serializable. Importing a server component into a client module pulls it the wrong way.
Why does server components matter when vibe coding?
The draft adds useState to a server component, or it marks the layout “use client” so the whole tree becomes client code. The data fetch that was supposed to stay on the server now runs in the browser, with the secret next to it.
How do you do server components?
Keep data reads in server components. Push “use client” down to the leaf that needs state. Pass plain props across the boundary. Do not import the server parent from the client child.
How do you ask a model for server components?
Make (page) a server component. Fetch (data) on the server. Add "use client" only on (widget). Pass serializable props. Do not import server components into the client file. Do not send secrets to the client.
What goes wrong with server components?
A client boundary at the root layout. Everything under it is client-rendered, and the server component win is gone.