Progressive Rendering — Streaming Critical Content First

Restored from a 2020-09 archive. Today, React 18 Streaming SSR and Next.js App Router provide this pattern at the framework level.

Progressive Rendering (PSSR) renders important content on the server first, streams it to the client without waiting for non-critical content, and then streams the rest as it becomes ready.

The browser starts rendering HTML as soon as it receives chunks of important content, while non-critical content is rendered later as it arrives.

How PSSR Works

1. Client requests HTML from the server
2. Server creates API requests, renders critical content first, streams to client
3. Client loads and renders the streamed HTML chunks
4. Server finishes rendering non-critical content and streams it
5. Client renders the remaining content
6. After full page load, the client attaches event handlers and enables interactivity on the DOM

PSSR combines the advantages of SSR and CSR. APIs live alongside the server, so initial content renders fast, and less important content streams to the browser concurrently without blocking.

PSSR lets sites load asynchronously without using JavaScript to load content.

Pros

• Critical content streams first from server to client
• Content rendering isn't blocked while JS bundles load
• Fast page load time — enjoys benefits of both CSR and SSR

Cons

• Even though content shows quickly, JS-driven interactivity only activates after the last non-critical content finishes loading
• (As of 2020) No well-established framework for PSSR; highly dependent on application-layer limitations