skills.rest
ubay1
ubay1COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/ubay1/next15-starter --skill streaming-ssr-ubay1
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
PatternsDevPatternsDev
235

react-selective-hydration

Enable selective hydration in React 18 streaming SSR with Suspense boundaries.

Official
Advanced
HollowvynHollowvyn

react-selective-hydration

Enable selective hydration for React 18 streaming SSR pages.

Official
Advanced
putto11262002putto11262002

data-fetching

Optimize server-side data fetching and caching in Next.js 16+ applications.

Community
Advanced
farming-labsfarming-labs
35

hydration-patterns

Explain hydration patterns and criteria for SSR/SSG interactivity decisions.

Official
Basic