Server and Client Components in Next.js: when to use each
Practical criteria for deciding what renders on the server and what needs JavaScript in the browser.
The starting point: server by default
In the App Router, every component is a Server Component unless you mark it with "use client". Server Components can read data directly, their code is not sent to the browser, and they reduce the JavaScript the user downloads.
The useful question is not "server or client?" but "does this component need state, effects or browser events?". If the answer is no, it should be a server component.
When a Client Component is the right choice
Forms with live validation, dropdown menus, carousels and anything that uses useState, useEffect or browser APIs such as window or localStorage needs to be a client component.
Keep the client boundary as low in the tree as possible. An interactive button inside a static page does not force the whole page to become a client component.
Passing data between the two worlds
A Server Component can render a Client Component and pass it serialisable props. A Client Component cannot import a Server Component, but it can receive one as children.
Avoid sending large or unnecessary objects to the client: send only what the interaction needs.