streaming-ssr

Stream React 18 SSR HTML shells with renderToPipeableStream and hydrateRoot.

1|Updated Jul 12, 2025

Search Tags:#performance #suspense #react #streaming #hydration #server-side rendering #ttfb

Ready to run

npx skills add https://github.com/ubay1/next15-starter --skill streaming-ssr-ubay1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: streaming-ssr
Source: https://github.com/ubay1/next15-starter/tree/main/.agents/skills/streaming-ssr
Command: npx skills add https://github.com/ubay1/next15-starter --skill streaming-ssr-ubay1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streaming server-side rendering reduces perceived load time by sending the initial HTML shell immediately and delivering the rest as it becomes ready.

Core Features & Use Cases

Incremental HTML delivery: Sends the app shell first, then streams slower chunks later to improve TTFB and FCP.
React 18 streaming APIs: Uses renderToPipeableStream() (Node) or renderToReadableStream() (Web streams) with Suspense.
Progressive hydration: Hydrates on the client with hydrateRoot() while the server continues streaming content.
Use Case: On a large, data-heavy page (e.g., a dashboard with slow widgets), stream the shell so users can see and interact sooner while late widgets load progressively.

Quick Start

Ask your AI to add React 18 streaming SSR to your Next.js/Node SSR handler using renderToPipeableStream() with onShellReady and Suspense boundaries.

Frequently Asked Questions about streaming-ssr

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How does streaming server-side rendering improve TTFB for large React pages?▼

Streaming server-side rendering improves TTFB by sending the initial HTML shell immediately and delivering slower chunks later. This allows users to see and interact with the app shell sooner while Suspense-delayed widgets load progressively.

How do I implement React 18 streaming SSR with renderToPipeableStream?▼

To implement React 18 streaming SSR, use renderToPipeableStream() in Node or renderToReadableStream() for Web streams. Apply proper callbacks like onShellReady and onError, wrap delayed content in Suspense boundaries, and hydrate the client using hydrateRoot().

Does React streaming SSR require Suspense boundaries to progressive hydrate content?▼

Yes, React streaming SSR uses Suspense boundaries to separate the immediate HTML shell from delayed content. This enables progressive hydration on the client with hydrateRoot() while the server continues streaming slower chunks as they become ready.

When should I use streaming SSR instead of traditional server-side rendering?▼

Use streaming SSR for large, data-heavy pages with slow widgets, such as dashboards. If Suspense-delayed content would otherwise delay first paint and interactivity in traditional SSR, streaming delivers the shell first to improve perceived load time.

Can I use streaming SSR to send HTML chunks before the entire component tree is ready?▼

Yes, streaming SSR sends HTML chunks incrementally as React generates them. By utilizing onShellReady and onAllReady callbacks with renderToPipeableStream, the server flushes the app shell immediately and streams subsequent markup as data resolves.