What is the difference between Server and Client Components, and when do you add "use client"?

Server Components run only on the server. Client Components also run in the browser. Add "use client" when a component needs interactivity or browser features.

In the App Router every component is a Server Component by default. Server Components:

• run only on the server
• can be async functions
• can read databases and secrets directly
• send no component JavaScript to the browser

You mark a Client Component with the "use client" directive at the top of the file. You need it when the component uses:

• state, such as useState or useReducer
• effects
• event handlers like onClick
• browser APIs such as localStorage
• hooks that depend on any of these

The directive marks a boundary between server and client code. The file, and everything it imports, becomes part of the client bundle.

Client Components are still prerendered to HTML on the server. Then the browser hydrates them: React attaches event handlers and state to that HTML.

The usual advice: keep most of the tree on the server. Make only the interactive leaves, like a like button, Client Components.