When will you use this?

You use layouts and styling in every page you build from your first screen to production.

• Course catalogs, lesson sidebars, and instructor dashboards all use layouts and shared navigation.
• When a student opens a lesson page, nested layouts keep the header and progress bar consistent.

Real-world: Swiggy-style delivery tracker

The Food tech team building Swiggy-style delivery tracker uses Data Fetching to load enrolled courses and progress from an API or database on the server. customers and riders never see the TypeScript files — they just get a fast, reliable live order map and status updates.

Production-style code

export default async function DashboardPage() {
  const res = await fetch(`${process.env.API_URL}/me/enrollments`, {
    headers: { Authorization: `Bearer ${process.env.INTERNAL_TOKEN}` },
    next: { revalidate: 30, tags: ['enrollments'] }
  });
  const enrollments = await res.json();

  return (
    <section>
      <h1>My courses</h1>
      <ul>
        {enrollments.map((e: { title: string }) => (
          <li key={e.title}>{e.title}</li>
        ))}
      </ul>
    </section>
  );
}

What happens in production: In Swiggy-style delivery tracker, getting Data Fetching right means customers and riders trust the live order map and status updates every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

export default async function DashboardPage() {
  const res = await fetch(`${process.env.API_URL}/me/enrollments`, {
    headers: { Authorization: `Bearer ${process.env.INTERNAL_TOKEN}` },
    next: { revalidate: 30, tags: ['enrollments'] }
  });
  const enrollments = await res.json();

  return (
    <section>
      <h1>My courses</h1>
      <ul>
        {enrollments.map((e: { title: string }) => (
          <li key={e.title}>{e.title}</li>
        ))}
      </ul>
    </section>
  );
}

Line-by-line walkthrough

How it works (big picture)

• Server fetch runs once per request (or per revalidate window).
• Secrets in headers never reach the browser.
• tags allow invalidation after Server Actions.

Do this on your computer

1. Fetch a public JSON API in a Server Component page
2. Add next: { revalidate: 60 } and observe caching behavior
3. Log error when res.ok is false
4. Plan which LearnHub pages are static vs dynamic
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.

Remember

Fetch in Server Components by default. Control freshness with revalidate and tags. Client libraries for interactive refetch later.

Common questions