What this prompt does
This prompt casts the AI as an expert in React concurrent features and asks it to architect a Suspense-based streaming SSR strategy for a [app_type] application. It analyzes the load sequence for [target_page], maps data dependencies and response times into a dependency graph, and ranks each component as critical, important, or deferrable. That ranking is what turns a vague slow page into a concrete streaming plan, because it decides what blocks rendering and what can stream in later.
The structure works because streaming SSR is about ordering and parallelism. It designs a Suspense boundary hierarchy with skeleton fallbacks sized to prevent layout shift, configures [framework] to stream the shell first and flush boundaries as [primary_data_source] resolves, and ensures [cdn_provider] passes streaming through. A waterfall-prevention step parallelizes requests with Promise.all and React cache(), every boundary is paired with an error boundary, and improvements are measured with [monitoring_tool] across TTFB, FCP, and LCP at p50/p95. The skeleton fallbacks are sized to match the final layout dimensions specifically to avoid Cumulative Layout Shift when streamed content arrives, which is a subtle failure mode that hurts Core Web Vitals if ignored. The error-recovery strategy adds retry logic with exponential backoff for transient failures and inline error states rather than full-page errors, so one slow dependency never takes down the whole route. Real User Monitoring captures p50 and p95 so you see typical and worst-case load times, not just an average.
When to use it
- A page feels slow even though the server responds quickly
- You need to rank components by priority to decide what streams first
- You want skeleton fallbacks that prevent Cumulative Layout Shift
- You are fighting request waterfalls from sequential await chains
- You want every Suspense boundary paired with an error boundary
- You need before/after measurement of TTFB, FCP, and LCP
Example output
The AI returns a dependency graph for [target_page] with components ranked critical/important/deferrable, a Suspense boundary hierarchy with layout-matched skeleton fallbacks, [framework] configuration to stream the shell first and flush boundaries as data resolves with chunked transfer through [cdn_provider], a waterfall-prevention plan using Promise.all and React cache(), ErrorBoundary components paired with each Suspense boundary with retry and backoff, and a measurement plan via [monitoring_tool] tracking TTFB, FCP, and LCP at p50 and p95.
Pro tips
- Build the dependency graph first; you cannot stream intelligently without knowing what blocks what
- Rank components honestly into critical/important/deferrable — above-the-fold content should never sit behind a slow boundary
- Size skeleton fallbacks to the final layout so streaming does not cause Cumulative Layout Shift
- Replace sequential awaits with Promise.all or React
cache()to kill waterfalls before adding boundaries - Pair every Suspense boundary with an error boundary so a slow
[primary_data_source]never blanks the page - Confirm
[cdn_provider]actually passes chunked streaming through, or the shell-first benefit disappears
