Streaming SSR with React Suspense

1import { Suspense } from 'react';
2
3// 1. FAST COMPONENT: Emitted immediately in the initial HTML chunk
4export default function ProductDetailPage() {
5  return (
6    <div className="product-layout">
7      <header>
8        <h1>Wireless Noise-Cancelling Headphones</h1>
9        <p className="price">$299.00</p>
10      </header>
11
12      {/* 2. SUSPENSE BOUNDARY: Fallback skeleton streams in initial chunk */}
13      <Suspense fallback={<ReviewsSkeleton />}>
14        {/* 3. SLOW COMPONENT: Fetches external API taking 2500ms */}
15        <SlowProductReviews productId="h-100" />
16      </Suspense>
17    </div>
18  );
19}
20
21async function SlowProductReviews({ productId }: { productId: string }) {
22  // Simulating slow microservice or database aggregate
23  const reviews = await fetch(`https://api.reviews.com/products/${productId}`, {
24    cache: 'no-store'
25  }).then(res => res.json());
26
27  return (
28    <section className="reviews">
29      <h2>Customer Reviews ({reviews.length})</h2>
30      {reviews.map((r: any) => (
31        <blockquote key={r.id}>{r.comment} - {r.rating} stars</blockquote>
32      ))}
33    </section>
34  );
35}
36
37function ReviewsSkeleton() {
38  return <div className="skeleton-reviews">Loading real customer feedback...</div>;
39}