Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.
Interactive Workshop
Walk through building a minimal SSR server with Fastify and renderToString. Flush the <head> first, stream the React output, then hydrate on the client with hydrateRoot.
Install fastify for the HTTP server and vite to bundle client.js into a script the browser can load. React and react-dom are shared between server and client.
1{
2 "name": "ssr",
3 "type": "module",
4 "scripts": {
5 "build": "vite build",
6 "start": "node server.js"
7 },
8 "dependencies": {
9 "fastify": "^5.0.0",
10 "@fastify/static": "^8.0.0",
11 "react": "^19.0.0",
12 "react-dom": "^19.0.0",
13 "vite": "^6.0.0"
14 }
15}ssr-serverrequestSimulate GET / — see the full HTML the server sends before any JavaScript runs.
hydrateSimulate hydrateRoot — check whether server and client hashes match.