Data Fetching — Complete Guide

Data Fetching — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of Next.js Tutorial on Toolliyo Academy.

8 min read Updated 6/25/2026

On this page

Next.js Tutorial (LearnHub) · Lesson 16 of 100

Data Fetching

Beginner → Intermediate → Advanced → Professional

Beginner · 1 — Foundations · ~12 min read · Module 2: Layouts & Styling

Introduction

This lesson is part of the beginner section. We explain Data Fetching slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. In App Router you fetch in Server Components with fetch, ORM clients, or direct DB access. fetch supports cache, revalidate, and tags. Client Components can use SWR or TanStack Query for client-side refetch. Course catalog, enrollment status, and instructor analytics all need data. Where and how you fetch affects speed, SEO, and freshness.

Data Fetching appears in almost every LearnHub page you will build. Once it clicks, data fetching and auth become much easier.

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

Code	What it means
`export default async function DashboardPage() {`	Default export — the main page or component this file provides to Next.js.
const res = await fetch(`${process.env.API_URL}/me/enrollments`, {	Fetches data over HTTP — runs on the server in Server Components or in Server Actions.
headers: { Authorization: `Bearer ${process.env.INTERNAL_TOKEN}` },	Part of the Data Fetching example — read it together with the lines before and after.
`next: { revalidate: 30, tags: ['enrollments'] }`	Part of the Data Fetching example — read it together with the lines before and after.
`});`	Closes a block started by { above.
`const enrollments = await res.json();`	Part of the Data Fetching example — read it together with the lines before and after.
`return (`	Returns JSX — what the user sees in the browser.
`<section>`	Part of the Data Fetching example — read it together with the lines before and after.
`<h1>My courses</h1>`	Part of the Data Fetching example — read it together with the lines before and after.
`<ul>`	Part of the Data Fetching example — read it together with the lines before and after.
`{enrollments.map((e: { title: string }) => (`	Part of the Data Fetching example — read it together with the lines before and after.
`<li key={e.title}>{e.title}</li>`	Part of the Data Fetching example — read it together with the lines before and after.
`))}`	Part of the Data Fetching example — read it together with the lines before and after.
`</ul>`	Part of the Data Fetching example — read it together with the lines before and after.

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

Fetch a public JSON API in a Server Component page
Add next: { revalidate: 60 } and observe caching behavior
Log error when res.ok is false
Plan which LearnHub pages are static vs dynamic
Read the real-world section and name which part of LearnHub uses this topic.
Run the example locally with npm run dev and confirm the same behavior.
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

fetch vs axios?

fetch is built in; axios works too but fetch integrates with Next cache options.

How long should I spend on Data Fetching?

Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new concept; setup lessons may take one afternoon.

What if I get stuck on Data Fetching?

Re-read the line-by-line walkthrough, check the terminal and browser overlay for errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.

Where is Data Fetching used in real jobs?

See the real-world section above — the same pattern appears in LMS, e-commerce, SaaS, and dashboards. Interviewers ask you to explain it using one concrete example.