React Server Components: A Deep Dive

on YouTube ↗39m

" summary

Builds a small "my dog site" app and converts client-only pages into async server components, using Express and renderToString to serve a serialized React tree. Implements a function to turn JSX into plain objects, inlines that output, and adds sanitize/revive JSON logic so the client can reconstruct symbols and hydrate with hydrateRoot. Overrides link clicks for client navigation, preserves input state and smooth transitions, proving react elements over the wire (not HTML) can work end-to-end.

AI-written summary · about

" chapters (12)

1. 0:00intro
2. 0:22preamble
3. 2:53react as an architecture
4. 6:10what is react server components?
5. 8:39building a sample application
6. 12:00adding server rendering
7. 15:12creating server components
8. 16:40rendering server components
9. 25:11persisting state with client-side react
10. 33:38rsc and csr and ssr
11. 35:19tools for adopting rscs
12. 37:57react is a community

" related talks

• 30mReact Server ComponentsTejas Kumar · React Nexus 2023
• 12mReact Server Components and SSR: How it FitsTejas Kumar · Next.js Conf 2023
• 21mReact Server ComponentsTejas Kumar · React Day Berlin 2023
• 19mReact Server Components - Under the HoodLee Rowlands · React Advanced 2021
• 40mServer Components for the Rest of UsTejas Kumar · reactjsday 2023
• 54mReact Server Components: A New Way to Build Fast and Interactive Web AppsAurora Walberg Scharff · NDC Sydney 2024
• 45mReact Server Components: A New Way to Build Fast and Interactive Web AppsAurora Walberg Scharff · NDC Oslo 2024
• 48mReact Server Components: A New Way to Build Fast and Interactive Web AppsAurora Walberg Scharff · CPH DevFest 2024