1. What is Streaming Server-Side Rendering (streaming SSR)?

Streaming server side rendering is the process of streaming a complete HTML page one chunk at a time instead of sending it in a single large response

2. How does Streaming Server-Side Rendering (streaming SSR) work?

0:00
/0:11
  1. first a client sends a GET request to the server
  2. the server then begins to render the page
  3. streaming it one chunk at a time to the client
  4. which renders each chunk as it arrives

3. What are the Pros and Cons of Streaming Server-Side Rendering (streaming SSR)?


Pros:

  • performance improvement over SSR
    • better TTFB than SSR
    • faster FP and FCP
    • consistently fast irrespective of page size
  • better backpressure handling
    • responsive websites even under challenging conditions
  • SEO optimized

Cons:

  • lack of support
    • not all runtimes support HTTP streaming, which is necessary for streaming SSR
  • caching more difficult, but possible
  • some patterns incompatible with streaming*
    • for example patterns that generate markup on the server
      that needs to be added to the document before the SSR-ed chunk

4. When should you use Streaming Server-Side Rendering (streaming SSR)?

  • when you can easily transition from SSR into streaming SSR
  • when you need better Time To First Byte, First Paint and First Contentful Paint
  • when you are doing server-side rendering and have difficulty processing all incoming requests

Perfect for e-commerce, social media and big content websites


Resources

Streams API - Web APIs | MDN
The Streams API allows JavaScript to programmatically access streams of data received over the network and process them as desired by the developer.
Streaming Server-Side Rendering
Generate HTML to be rendered on the server in response to a user request
Stream | Node.js v20.5.1 Documentation
ReactDOMServer – React
A JavaScript library for building user interfaces
ReactDOMServer – React
A JavaScript library for building user interfaces
Streaming Server-Side Rendering and Caching at Spectrum
We recently implemented streaming server-side rendering and caching for Spectrum, here is how
What is HTTP Streaming?
Read the Real-time communication API Blog now.
Streaming Server-Side Rendering | JavaScript Patterns
Website created for the FrontendMasters course on JavaScript Patterns by Lydia Hallie
What’s New With Server-Side Rendering in React 16 | HackerNoon
React 16 is here! 🎉🎉🎉
Streaming server-side rendering (SSR) | Hydrogen v1
Hydrogen 2.0 is out now. These archival Hydrogen 1.0 docs are provided only to assist developers during their upgrade process. Please migrate to Hydrogen 2.0 as soon as possible.

https://medium.com/@pythonlearn1024/understanding-csr-ssr-ssg-isr-and-streaming-in-next-js-bc8e6f014ec1

Routing: Loading UI and Streaming
Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.
React Server Components with Next.js – Vercel
Learn about React Server Components (experimental) and how they’ll change how we build React applications, creating a better end-user experience.
How to server-side render React, hydrate it on the client and combine client and server routes
In this article, I would like to share an easy way to server-side render your R…

https://medium.com/@jayphelps/backpressure-explained-the-flow-of-data-through-software-2350b3e77ce7

React 18 Streaming SSR Showcase with 5 examples
React 18 Streaming SSR Showcase with 5 examples
Glossary + Explain Like I’m Five · reactwg/react-18 · Discussion #46
tl;dr This thread contains plain English and explain-like-I’m-five definitions of the terms and concepts used throughout other discussions. Scroll to comments to find (or add) a term and explanatio…
Upgrading to React 18 on the server · reactwg/react-18 · Discussion #22
Overview Upgrading to React 18 on the server has the following steps: Upgrade to the latest React 18 release Optionally, switch from renderToString to renderToPipeableStream to unlock the new featu…
New Suspense SSR Architecture in React 18 · reactwg/react-18 · Discussion #37
Overview React 18 will include architectural improvements to React server-side rendering (SSR) performance. These improvements are substantial and are the culmination of several years of work. Most…
SSR, Streaming, and CSS-in-JS
How does CSS-in-JS work with SSR, and streaming SSR?
Application Holotypes: A Guide to Architecture Decisions - JASON Format
Patterns for Building JavaScript Websites in 2022
Deciding on the approaches and tools to use to build on web these days can be a challenging prospect.…