Command Palette

Search for a command to run...

Hectal
Phase 20Advanced21 of 28 in React

Server Components and Next.js

Where HTML is made (CSR, SSR, SSG, ISR, streaming), React Server Components, Server Functions, the Next.js App Router, caching, hydration and choosing a framework.

Until now every React example made its HTML in the browser: the page arrived empty and JavaScript built it. This phase moves React onto the server. You'll learn the rendering strategies (client rendering, server rendering, static generation, incremental regeneration and streaming), what hydration is, and why the first HTML a user receives matters so much for speed and search engines.

Then you'll meet React Server Components, components that run only on the server and send no JavaScript, the "use client" boundary, and Server Functions ("use server"), which let a form or a button call code on the server. You'll learn to treat every Server Function as a public HTTP endpoint: validate the input, authorise every call and never return secrets.

Finally you'll build with the framework that ships all of this today, Next.js 16 and its App Router: file-based routes, layouts, loading and error files, Link and Image, data fetching, "use cache" and revalidation. You'll fix hydration errors with confidence and finish with a map of the React tooling world (Vite, Next.js, React Router framework mode, TanStack Start, Expo). The live examples run real react-dom/server and hydrateRoot in your browser; anything that needs a real server is shown as Next.js code and clearly labelled.

0/7 · 0%
7 topics ~3 h 26 code blocks & diagrams
Start with the first topic
1
20.1

CSR, SSR, SSG, ISR and Streaming

Rendering strategies differ in where and when a page's HTML is made: in the browser (CSR), on the server for each request (SSR), once at build time (SSG), at build time and then refreshed (ISR), or on the server in pieces as data arrives (streaming); hydration then makes server HTML interactive.

26 min 1 diagram 4 code practice

2
20.2

React Server Components

React Server Components run only on the server (at build time or per request), can be async and read data directly, and send their result to the browser instead of their code; "use client" marks where client components, which have state and event handlers, begin.

27 min 1 diagram 3 code practice

3
20.3

Server Functions and Server Actions

A Server Function is an async function marked "use server" that runs on the server but can be called from the client like a normal function; used as a form action it is called a Server Action, works before JavaScript loads, and is a public HTTP endpoint that must validate its input and authorise every call.

28 min 3 code practice

4
20.4

Next.js Basics: the App Router

Next.js is the most used React framework: in its App Router, folders inside app/ are URL segments, special files (page, layout, loading, error, not-found) build each route's UI, components are server components unless a file says "use client", and next/link and next/image handle fast navigation and optimised images.

26 min 3 code practice

5
20.5

Data and Caching in Next.js

In Next.js 16 server components await their data directly; with Cache Components enabled you cache functions or components with "use cache", set lifetimes with cacheLife, tag them with cacheTag and refresh them with revalidateTag, updateTag or revalidatePath, while request-time data streams behind <Suspense>, so one route can be part static, part dynamic.

27 min 4 code practice

6
20.6

Hydration and Hydration Errors

Hydration is React rendering the same tree in the browser and adopting the server's HTML instead of creating new DOM; if the first client render produces different output (dates, random values, browser-only data, invalid nesting), React reports a hydration mismatch, so make the first client render match the server and change things after hydration.

23 min 4 code practice

7
20.7

Frameworks and Build Tools

A build tool like Vite turns your source into files a browser can run; a framework (Next.js, React Router framework mode, TanStack Start, Expo for mobile) adds routing, data loading, server rendering and deployment conventions; choose a framework when you need those, and plain Vite when a client-only app is enough.

22 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Render a component to HTML

Play the server. Use renderToString from react-dom/server to turn <Card name="Mango" price={60} /> into an HTML string.

Intermediate
2

Fix a hydration mismatch

Visits reads the visit count from localStorage while rendering. The "server" can't see localStorage, so its HTML says Welcome! while the browser's first render says Visit number 3, and hydration fails (see the console).

Intermediate
3

Split a page into server and client components

This page runs through a simulated RSC pipeline (at the bottom, don't change it): ProductPage is a server component and AddToCart is a client component. Right now the server passes a click handler to the client component, so the pipeline throws React's real error and the page shows it.

Intermediate
4

Stream each slow part on its own

This page is server-rendered with renderToReadableStream and streamed into #root (the code at the bottom plays the browser). Two slow "queries" finish when you click the buttons Finish details and Finish reviews.

Advanced
5

Secure a Server Action

renameNote plays a Server Function: it runs on the "server" and callServer plays the network. Right now it trusts the client completely: it accepts an empty or huge name, and it trusts the ownerId the client sends, so the Simulate an edited request button can rename someone else's note.

Advanced