Think in terms of where work happens
A Server Component renders on the server and sends its result to the browser. It can read data close to the source without shipping its implementation as browser JavaScript.
A Client Component is sent to the browser so it can respond to clicks, typing, local state, or browser APIs. A page can combine both kinds.
Keep interaction at the edge
Start with server-rendered content. Add a Client Component around the smallest part that truly needs interaction, such as a menu, filter, or form control.
This boundary can reduce browser work while keeping the interface interactive. It also makes data flow easier to follow.
Choose the boundary deliberately
A component that uses state, effects, or browser-only APIs needs to run on the client. Static headings, content, and data-driven lists can often stay on the server.
Keep props crossing the boundary simple and serializable, then measure the production build to confirm the change helped.