React Server Components (RSC)
RSC are components that render exclusively on the server and send no JavaScript to the client.
Comparison
| Server Component | Client Component | |
|---|---|---|
| Rendering | Server | Client + Server (hydration) |
| JS in bundle | No | Yes |
Hooks (useState etc.) | No | Yes |
| Direct DB/FS access | Yes | No |
| Interactivity | No | Yes |
Example
tsx
// ServerComponent.tsx - no 'use client'
async function ProductPage({ id }: { id: string }) {
const product = await db.products.findById(id); // directly on the server
return <ProductCard product={product} />;
}Key benefits
- Less JavaScript in the bundle - faster load.
- Data fetching close to the data source.
- Sensitive data never reaches the client.
The
'use client'directive turns a component into a Client Component. In Next.js App Router all components are Server Components by default.
updated
did you know it?