Module Review: Server Components
Key Takeaways
- Dual-Component Model: React now has two environments. Server Components run only on the server (zero bundle size), while Client Components run on the client (and hydrate).
- The Boundary: The
'use client'directive marks the boundary between server logic and client interactivity. - Serialization: Props passed from Server to Client components must be serializable (JSON-compatible).
- Server Actions: Functions marked with
'use server'allow you to execute server-side logic directly from your components, replacing traditional API routes. - Streaming SSR: Breaking the “waterfall” problem by sending HTML in chunks as it becomes ready, enabled by
<Suspense>boundaries.
Interactive Flashcards
Test your knowledge of React Server Components. Click to flip the cards.
How do you mark a component as a Client Component?
It involves a directive string.
Add
'use client' at the very top of the file.Can a Client Component import a Server Component directly?
Think about the bundle boundary.
No. Importing a Server Component into a Client Component makes it part of the client bundle. You must pass it as
children or props instead (The Hole Pattern).What is the "RSC Payload"?
A compact, JSON-like string format that represents the rendered React tree, sent from the server to the client.
What hook provides optimistic UI updates for Server Actions?
useOptimistic allows you to update the UI immediately while the server action is pending.How does Streaming SSR improve performance?
It allows the server to send the "shell" (header, sidebar) immediately, and then stream in slower content (wrapped in Suspense) as it finishes data fetching.
Where can you use `useFormStatus`?
Only inside a component that is rendered inside the
<form> element.Cheat Sheet
Server vs. Client Capabilities
| Capability | Server Components | Client Components |
|---|---|---|
| Data Fetching | ✅ Direct DB / API access | ❌ No direct access (use API/Actions) |
| Async/Await | ✅ Yes | ❌ No (Not yet) |
State (useState, useReducer) |
❌ No | ✅ Yes |
Lifecycle (useEffect) |
❌ No | ✅ Yes |
| Browser APIs (localStorage, geolocation) | ❌ No | ✅ Yes |
Event Listeners (onClick) |
❌ No | ✅ Yes |
| Dependencies | ✅ Node.js APIs | ✅ Browser APIs |
| Bundle Size | 0 KB | Adds to bundle |
Directives
| Directive | Location | Purpose |
|---|---|---|
'use client' |
Top of file | Marks component as a Client Component. Allows hooks and interactivity. |
'use server' |
Top of file (or inside function) | Marks function as a Server Action. Creates an API endpoint. |
Hooks for Actions
| Hook | Purpose |
|---|---|
useFormStatus |
Access the pending state of the form submission. Must be used inside the form component. |
useOptimistic |
Optimistically update the UI state before the server responds. |
The “Hole” Pattern
Passing Server Components to Client Components.
// ❌ BAD: Importing Server Component
// ClientWrapper.tsx
import ServerComp from './ServerComp'; // Error!
// ✅ GOOD: Passing as Children
// Layout.tsx (Server)
<ClientWrapper>
<ServerComp />
</ClientWrapper>
Next Steps
Now that you understand the architecture, it’s time to dive into React Glossary to solidify your terminology.