React Server Components

What you'll learn

• What Server Components and Client Components each can and cannot do
• How the 'use client' directive draws a boundary, and what crosses it
• Reading data directly in a Server Component, with no useEffect
• Composing Server Components inside Client Components through children
• Writing Server Actions and calling them from a form
• How revalidation refreshes the page after a mutation
• How React's caching layer differs from a framework's
• Streaming a page with Suspense boundaries on the server

1. 01
   The two-runtime model

   Two places code can run, one app. Server Components live on the server; Client Components live in the browser. Each side has different powers.
   15 min
2. 02
   'use client'

   The directive that draws the line. What crosses the boundary, what costs it carries, and where to put it.
   17 min
3. 03
   Reading data in a Server Component

   Components that are async functions. Awaiting a fetch inside render, with no useEffect, no loading flag, no spinner-by-hand.
   16 min
4. 04
   Composition across the boundary

   Passing a Server Component as a child of a Client Component. The pattern that lets server data sit inside interactive shells.
   16 min
5. 05
   'use server' and Server Actions

   Functions that run on the server, called from a button on the client. How the bundler splits the file in two.
   17 min
6. 06
   Server Actions end-to-end

   From a form submit to a database write to a re-rendered list. Revalidation, the missing step that ties it together.
   16 min
7. 07
   Caching and revalidation, in React's terms

   What React caches, what the framework caches, and how the two layers cooperate. Names you'll see and what they mean.
   15 min
8. 08
   Streaming and Suspense on the server

   A page that flushes piece by piece. Suspense boundaries become network boundaries when the server is doing the rendering.
   15 min
9. 09
   What can't go in a Server Component

   useState, useEffect, onClick, window — the things that fail with confusing errors, and the 'use client' reflex that fixes them.
   13 min