Real World Example

Streaming home pages (Netflix, Hotstar) show many rows: "Trending", "Continue Watching", "Because you watched...". Each row is data-driven but mostly static, with small interactive controls. As Server Components, each row fetches its own data and the arrows are a tiny client component.

// components/ProductRow.tsx (server)
import RowScroller from './RowScroller'; // 'use client' — arrow buttons only
import { getProductsByTag } from '@/lib/products';

export default async function ProductRow({ title, tag }: { title: string; tag: string }) {
  const items = await getProductsByTag(tag, 12);
  return (
    <section>
      <h2>{title}</h2>
      <RowScroller>
        {items.map((p) => (
          <a key={p.id} href={'/products/' + p.id}>
            {p.name}
          </a>
        ))}
      </RowScroller>
    </section>
  );
}

// app/page.tsx
// <ProductRow title="Trending Mobiles" tag="trending-mobiles" />
// <ProductRow title="Under ₹999" tag="under-999" /></>

• Each row owns its data: teams can add rows without touching the page.
• The list markup is rendered on the server; only RowScroller (scroll buttons) ships JavaScript.
• With <Suspense> around each row (next modules), slow rows stream in later without blocking the rest.