Real World Example

Open Flipkart or Myntra: the home page shows banners and product rows that must appear instantly and be indexed by Google, while the search box and cart button are interactive. In Next.js the page is a Server Component that loads data, and only the small interactive part runs in the browser.

app/page.tsx

import SearchBox from './search-box'; // a Client Component ('use client')

type Product = { id: number; name: string; price: number };

async function getDeals(): Promise<Product[]> {
  const res = await fetch('https://api.shopease.in/deals', { next: { revalidate: 300 } });
  return res.json();
}

export default async function HomePage() {
  const deals = await getDeals(); // runs on the server

  return (
    <main>
      <SearchBox />
      <h2>Deals of the Day</h2>
      <ul>
        {deals.map((p) => (
          <li key={p.id}>
            {p.name} — ₹{p.price}
          </li>
        ))}
      </ul>
    </main>
  );
}

1. The server calls the deals API and renders the list to HTML.
2. Because of revalidate: 300, the result is reused for 5 minutes (ISR) — thousands of visitors, one API call.
3. The browser shows the HTML immediately, then loads the small JavaScript for SearchBox.