Progressive HTML Rendering 101
summary
Claims that streaming HTML and async fragment rendering shrink the blank-page window and make pages visible and usable sooner, demonstrated with a Node http server example, a simple event-emitter demo, and the async-writer module that buffers and preserves order so out‑of‑order fragments can flush without breaking layout. Shows the cost of naive out‑of‑order flushing (DOM misplacement) and the fix where small client JS moves fragments into place. References partial hydration and Marco frameworks with a ~13 KB runtime (target ~7 KB and 0kbjs for noninteractive pages).
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:05Move from client to server
- 3:53What is progressive HTML
- 5:18Problem without progressive
- 7:05Flushing the head early
- 8:50Splitting page into fragments
- 12:41Out of order fragments
- 14:28Async rendering and streaming
- 17:03Async writes in Node.js
- 20:17Paint order with JavaScript
- 22:44Frameworks for progressive
- 25:11Future of hydration
- 26:00Q&A
related talks
22mProgressive Enhancement
23mProgressive Rendering: Improve Performance on Slower Networks
40mOut-of-Order Streaming — The Future of Web Development
31mStreaming React for Faster UIs
58mUnderstand the Next Phase of Web Development
28mImproving Performance using React Server Components!
41mYou Really Don't Need All That JavaScript I Promise
33mRendering on the Web: Performance Implications of Application Architecture