skills.rest
Hollowvyn
HollowvynOFFICIAL
Explore all skills by this author →
GitHub

streaming-ssr

Stream React 18 HTML incrementally using renderToPipeableStream and Suspense boundaries.

Updated May 20, 2026
Search Tags:#performance#suspense#react#streaming#ssr#hydration#ttfb
One-click install
npx skills add https://github.com/Hollowvyn/cognipace-v2 --skill streaming-ssr-hollowvyn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: streaming-ssr
Source: https://github.com/Hollowvyn/cognipace-v2/tree/main/.agents/skills/streaming-ssr
Command: npx skills add https://github.com/Hollowvyn/cognipace-v2 --skill streaming-ssr-hollowvyn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streaming server-side rendering reduces perceived load time by sending HTML to the browser incrementally, so users can begin parsing and painting before the entire React tree finishes rendering.

Core Features & Use Cases

  • Chunked HTML delivery for faster TTFB and FCP: Send the shell early and stream slower parts later to keep the page responsive.
  • React 18 streaming APIs: Use renderToPipeableStream (Node) or renderToReadableStream (Web streams) with hydrateRoot for progressive hydration.
  • Suspense-driven partial rendering: Combine streaming with Suspense boundaries to stream portions as they become ready.
  • Error and fallback handling: Use callbacks like onShellReady and onError to control status codes and reliability.

Quick Start

Explain how your app can render the initial shell immediately with renderToPipeableStream on the server, then hydrate progressively on the client using hydrateRoot 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 and FCP in React?▼

Streaming SSR sends HTML chunks progressively so the browser parses and paints before the full React tree finishes rendering. It delivers the shell early and streams slower parts later, improving perceived load time for large pages.

What's the best way to implement streaming SSR with Suspense in React 18?▼

Use renderToPipeableStream on Node or renderToReadableStream on Web streams, then hydrate progressively on the client with hydrateRoot. Combine streaming with Suspense boundaries to stream portions as they become ready.

Do I need React 18 to use streaming server-side rendering?▼

Yes, streaming SSR requires React 18+ streaming APIs like renderToPipeableStream or renderToReadableStream. You also need correct shell readiness handling, Suspense-compatible chunking, and robust error callbacks for valid progressive HTML output.

How do onShellReady and onError callbacks control status codes in streaming SSR?▼

Callbacks like onShellReady and onError control status codes and reliability in streaming SSR. Use onShellReady to send the initial HTML shell with the correct status, and onError to handle rendering failures and ensure robust delivery.

When should I use streaming SSR instead of waiting for a full render?▼

Use streaming SSR for large pages or environments where waiting for full render hurts user experience. It keeps the page responsive by sending the shell early and streaming slower parts later, improving perceived performance.

Related Skills

Explore More Software Engineering Skills→
ubay1ubay1
1

streaming-ssr

Stream React 18 SSR HTML shells with renderToPipeableStream and hydrateRoot.

Community
Intermediate
HollowvynHollowvyn

react-selective-hydration

Enable selective hydration for React 18 streaming SSR pages.

Official
Advanced
RomualdPRomualdP

Suspense & Streaming Generator

Wrap async React/Next.js server components in nested Suspense with skeleton fallbacks.

Community
Intermediate
quanngynxquanngynx

server-side-rendering

Generate complete HTML on the server for React and Next.js requests.

Community
Intermediate