Streaming in Next.js

on YouTube ↗25m

" summary

Experimental Next.js feature enables streaming with getServerSideProps by splitting server rendering into a two-flush pattern: first flush sends headers and head as soon as routing finishes, second flush sends body when data is ready. Early tests report a 2–5% LCP gain translating to roughly 400–600 ms saved in many cases. It targets React 17 apps, requires moving next/head and next/script into the top app component, and forces client-side error handling because status headers are sent before full render.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 7:30CSR Loading
3. 13:25Current SSR Loading
4. 17:03Two-flush strategy
5. 18:45Current API
6. 19:56Prospective API
7. 20:45Caveats
8. 24:05Move and

" related talks

• 16mStreaming Server Side Rendering simplified with Next.JSMariappan Subramanian · React Nexus 2023
• 54mReact Server Components: A New Way to Build Fast and Interactive Web AppsAurora Walberg Scharff · NDC Sydney 2024
• 25mProgressive Rendering – how to make your app render soonerDenis Rechkunov · JSConf Iceland 2016
• 48mReact Server Components: A New Way to Build Fast and Interactive Web AppsAurora Walberg Scharff · CPH DevFest 2024
• 30mJust another ECMAScript Trait Syntax ProposalStop breaking the web and start building server-rendered web apps using next.jsHenrik Wenz · JSUnconf 2017
• 45mReact Server Components: A New Way to Build Fast and Interactive Web AppsAurora Walberg Scharff · NDC Oslo 2024
• 39mWe Deserve a Better Streams API for the WebJames M Snell · Node Congress 2026
• 16mThe time to go full stack is nowAndre Landgraf · Reactathon 2023