rsc-streaming-performance

Diagnose React Server Components streaming bottlenecks in Next.js App Router pages.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/raingernx/KRUKRAFT --skill rsc-streaming-performance
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: rsc-streaming-performance
Source: https://github.com/raingernx/KRUKRAFT/tree/main/.codex/skills/rsc-streaming-performance
Command: npx skills add https://github.com/raingernx/KRUKRAFT --skill rsc-streaming-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

RSC streaming performance is often hindered by serial data fetches, poorly placed Suspense boundaries, and caching gaps that cause content to appear late and on error-prone cold starts.

Core Features & Use Cases

  • Phase-based bottleneck diagnosis: read the page's server/component tree to identify serial awaits, waterfall data fetches, and caching gaps that slow rendering.
  • Suspense decomposition patterns: split slow components into a sync shell and an async subtree wrapped in Suspense to stream content progressively.
  • Redis cross-instance caching guidance: recommend rememberJson usage and proper cache keys to reduce bimodal latency while avoiding stale data.
  • Use Case: On a production Next.js App Router page with multiple independent data fetches, apply this skill to reduce p95 latency and improve first contentful paint.

Quick Start

Audit a slow page by mapping the server component tree, identify serial awaits, and implement parallel data fetches with Suspense boundaries.

Frequently Asked Questions about rsc-streaming-performance

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

FAQPage Schema
How do I fix React Server Components streaming bottlenecks in Next.js App Router?

Fix RSC streaming bottlenecks by mapping the server component tree to identify serial awaits, enforcing parallel data fetches, and wrapping async subtrees in correct Suspense boundaries to stream content progressively.

Why does my Next.js page have high p95 latency and long Suspense waterfalls?

High p95 latency and Suspense waterfalls are caused by serial data fetches, poorly placed Suspense boundaries, and caching gaps that delay rendering and cause error-prone cold starts on independent data fetches.

What is the best way to structure Suspense boundaries for progressive streaming in Next.js?

The best way to structure Suspense boundaries is to split slow components into a synchronous shell and an asynchronous subtree wrapped in Suspense, enabling progressive content streaming instead of long waterfalls.

How do I reduce bimodal latency on cold starts with Redis caching in Next.js?

Reduce bimodal latency by implementing Redis cross-instance caching patterns using rememberJson with proper cache keys, which stabilizes p95 latency across instances while avoiding stale data.

Does this RSC streaming performance approach work for production SaaS platforms with multiple independent data fetches?

Yes, this approach targets production Next.js App Router SaaS platforms specifically, applying phase-based bottleneck diagnosis, parallel fetches, and Redis caching to stabilize bimodal latency for multiple independent data fetches.