How Streaming Can Supercharge React
summary
Server-side streaming of HTML, CSS, JS and JSON shaves seconds off first paint and interactivity: a client-rendered demo hits ~4.1s to paint, while server render paints at 1.7s and becomes interactive at 3.2s; on a Moto G4 client render is ~13s versus streaming paint ~3.3s and interactive ~9.6s. The approach uses server chunk rendering, requires aggressive intra-page code-splitting for CSS/JS, tolerates slow APIs and maps to emerging react 16 streaming renderer capabilities.
AI-written summary · about
chapters (11)
- 0:00Intro
- 0:45Performance
- 3:22Client Rendering
- 7:08Server Rendering
- 11:12Downsides
- 13:03Uncanny Valley
- 14:32HTML Streaming
- 17:33Chunk Rendering Walkthrough
- 19:34Code Walkthrough
- 23:16Pros and Cons
- 25:16Lessons
related talks
31mStreaming React for Faster UIs
47mReact, Rendering, Performance
28mImproving Performance using React Server Components!
23mProgressive Rendering: Improve Performance on Slower Networks
08mLightning fast SSR React apps with top perceived performance and no (client side) JavaScript
33mSaving the Web 16 Milliseconds at a Time
24mHoussein Djirdeh - Progressive React
26mProgressive React