🔷 React Server Components: Why Client Components Still SSR
🧠 Traditional Model (Before RSC)
React Tree → HTML (SSR) or JS (CSR) → Hydration → Interactive UI
- All components could be rendered to HTML on the server
- Hydration enables client-side interactivity
🟦 New Model with RSC
Server Tree → Client Tree → DOM
- Server Tree: Components without
'use client'
- Run on the server or at build time
- Can access DB, file system, secrets
- Do not ship JS to the client
- Client Tree: Components with
'use client'
- Run in the browser
- Support interactivity (state, useEffect, events)
💡 Key Insight
"Client" and "Server" refer to React layers, not physical environments.
| Type |
SSR Output |
Hydration Required |
Ships JS |
Use Case |
| Server Component |
✅ Yes |
❌ No |
❌ No |
Static UI, SEO |
| Client Component |
✅ Yes |
✅ Yes |
✅ Yes |
Interactive UI |
✅ Why Client Components Still SSR
- They are still part of the render pipeline
- Can output static HTML for faster initial load
- Need hydration to become interactive