How are Server Components different from traditional components?
The main difference between Server Components and traditional React components lies in where and how they run:
| Feature | Server Components | Traditional (Client) Components |
|---|---|---|
| Run on | Server only | Browser (client-side) |
| JavaScript bundle size | No impact — not sent to client | Adds to bundle size |
| Can access server-side resources (e.g., database, filesystem) | Yes | No |
| Interactivity (event listeners) | No | Yes |
| Best used for | Data fetching, heavy computation | UI interactions, event handling |
In other words:
- Server Components handle heavy work like data fetching and computation.
- Client Components handle interactivity like button clicks, input handling, and UI updates.
You can mix Server and Client Components together in the same React tree, giving you fine control over performance and user experience.