Server Components for the Rest of Us
summary
A concrete demo shows server components as a data‑fetching mechanism: an Express server renderer uses React’s renderToString plus a custom unwrap RSCs routine to await async components, file‑system routing loads page modules, and a JSON replacer serializes React’s symbol types into window.initialJSX. The client derializes that tree, hydrates and performs soft navigation, preserving entered state between pages. Tools shown include Vite, renderToString, fetch/unichi; the implementation works and yields server‑rendered, indexable HTML with smooth client transitions.
AI-written summary · about
chapters (13)
- 0:00React Server Components intro
- 1:06Server component mechanics
- 3:35Dog site demo
- 5:21Adding server-side rendering with Express
- 7:49File-system routing
- 10:17Async data fetching
- 13:07Server component promises
- 19:53Server-rendered data components
- 21:18Adding client-side React
- 23:02Serializing component trees
- 27:17Soft navigation with React
- 32:18Summary and use cases
- 33:24Q&A
related talks
21mReact Server Components
30mReact Server Components
54mReact Server Components: A New Way to Build Fast and Interactive Web Apps
19mReact Server Components - Under the Hood
12mReact Server Components and SSR: How it Fits
39mReact Server Components: A Deep Dive
40mServer-Side Rendering 2.0? React Server Components
01h 07mDemystifying React Server Components