Splitting the Work: Streaming Server Rendering with Suspense
summary
Shows how React 18 uses Suspense plus renderToPipeableStream to split server work so slow pieces don’t block the page: a heavy comments component is wrapped in Suspense, server sends fallback HTML first, then streams the comments’ rendered HTML and a placement script when its data is ready. The result is streaming HTML and selective hydration so other UI hydrates and accepts clicks while the slow component loads, prioritizing hydration for whatever the user interacts with.
AI-written summary · about
chapters (7)
- 0:00Introduction to streaming
- 2:47Server rendering basics
- 5:55Problems with pre-React 18
- 10:31React 18 improvements
- 11:54How Suspense works
- 14:40Selective hydration benefits
- 17:13Conclusion and call to action
related talks
16mStreaming Server Side Rendering simplified with Next.JS
18mExploring React 18's Streaming Capabilities with Suspense for SSR
40mReact Rendering Strategies Panel Discussion
10mServer Rendering & Suspense, Hydration Improvement
28mImproving Performance using React Server Components!
26mReact Suspense
31mLiving on the Edge
31mStreaming React for Faster UIs