Real World Example

Flipkart's product page combines product details, price, offers, reviews and similar products. Each comes from a different service. ShopEase fetches them in parallel and streams optional parts:

import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { getProduct, getOffers } from '@/lib/catalog';
import Reviews from './Reviews'; // async server component
import Similar from './Similar'; // async server component

export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const id = Number((await params).id);
  const [product, offers] = await Promise.all([getProduct(id), getOffers(id)]);
  if (!product) notFound();

  return (
    <main>
      <h1>{product.name}</h1>
      <p>₹{product.price}</p>
      <ul>{offers.map((o) => <li key={o.code}>{o.text}</li>)}</ul>
      <Suspense fallback={<p>Loading reviews...</p>}>
        <Reviews productId={id} />
      </Suspense>
      <Suspense fallback={<p>Loading similar products...</p>}>
        <Similar productId={id} />
      </Suspense>
    </main>
  );
}

0 ms     request
         ├── getProduct  ████████ 120 ms
         └── getOffers   █████     80 ms
120 ms   HTML with title, price, offers + 2 spinners  ──► user sees the page
         ├── Reviews     ██████████████ 350 ms  ──► streamed in
         └── Similar     ████████████████████ 500 ms ──► streamed in