Introduction 👋

Data fetching is at the heart of most Next.js applications. The App Router extends the native fetch API with powerful caching, deduplication, and revalidation features, and gives Server Components the ability to fetch data directly without a client-side round trip. This tutorial covers every layer of data fetching, from simple requests to advanced caching strategies.

What is Data Fetching? 🧠

Data fetching is the process of retrieving data — from a database, a REST API, a CMS, or any other source — to render into your UI. In Next.js, where and when that fetch happens has a big impact on performance, freshness, and SEO.

Data Fetching in Next.js 🚀

Next.js encourages fetching data as close to where it's used as possible, directly inside Server Components, using an extended version of the native fetch() function that integrates with the framework's caching system.

export default async function Posts() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();
  return <List type="unordered">{posts.map((p) => <List.Item key={p.id}>{p.title}</List.Item>)}</List>;
}

Fetch API 🌐

Next.js extends the Web fetch() API with a next options object, letting you configure caching and revalidation behavior per request, directly alongside the fetch call itself.

export async function getData() {
  const res = await fetch("https://api.example.com/data", {
    next: { revalidate: 60, tags: ["data"] },
  });
  return res.json();
}

Server-Side Data Fetching 🖥️

Fetching data in a Server Component happens before any HTML is sent to the browser. This means no loading spinners are needed for the initial render, and sensitive logic like API keys never reaches the client.

export default async function Dashboard() {
  const stats = await fetch("https://api.example.com/stats", { cache: "no-store" }).then((r) => r.json());
  return <p>Active users: {stats.activeUsers}</p>;
}

Client-Side Data Fetching 💻

Client-side fetching is appropriate for data that's user-specific, changes frequently after load, or depends on client-only state. It's typically done with useEffect or a library like SWR.

"use client";

import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

export default function Notifications() {
  const { data, isLoading } = useSWR("/api/notifications", fetcher, { refreshInterval: 5000 });
  if (isLoading) return <p>Loading…</p>;
  return <p>{data.count} new notifications</p>;
}

Static Data Fetching 🧊

By default, fetch() requests in Server Components are cached indefinitely, making the data static — fetched once at build time and reused across all requests until manually revalidated.

export default async function About() {
  const data = await fetch("https://api.example.com/company"); // cached by default
  const company = await data.json();
  return <h1>{company.name}</h1>;
}

Dynamic Data Fetching 🔄

Setting cache: "no-store" opts a specific fetch() call out of caching entirely, ensuring fresh data on every request — and typically making the whole route dynamic as a result.

export default async function Live() {
  const res = await fetch("https://api.example.com/live", { cache: "no-store" });
  const data = await res.json();
  return <p>{data.value}</p>;
}

Parallel Data Fetching ⚡

Parallel fetching kicks off multiple independent requests at the same time using Promise.all, rather than await-ing them one after another — significantly reducing total wait time.

export default async function Profile() {
  const [user, posts] = await Promise.all([
    fetch("https://api.example.com/user").then((r) => r.json()),
    fetch("https://api.example.com/posts").then((r) => r.json()),
  ]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{posts.length} posts</p>
    </div>
  );
}

Sequential Data Fetching ⏭️

Sequential fetching happens when one request must wait for another to complete first, typically because the second request depends on data from the first.

export default async function User({ params }: { params: { id: string } }) {
  const user = await fetch(`https://api.example.com/users/${params.id}`).then((r) => r.json());
  const orders = await fetch(`https://api.example.com/orders?userId=${user.id}`).then((r) => r.json());

  return <p>{user.name} has {orders.length} orders</p>;
}

Dependent Data Fetching 🔗

Dependent fetching is a specific case of sequential fetching where the second request's parameters literally come from the first response, such as fetching a user before fetching that user's permissions.

export default async function Settings() {
  const session = await getSession();
  const permissions = await fetch(`https://api.example.com/permissions/${session.userId}`).then((r) => r.json());
  return <p>Role: {permissions.role}</p>;
}

Streaming Data 🌊

Wrapping a slow data-fetching component in <Suspense> allows the rest of the page to render immediately, streaming in the slower content once it's ready.

import { Suspense } from "react";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<p>Loading revenue…</p>}>
        <Revenue />
      </Suspense>
    </div>
  );
}

Request Memoization 🧮

Within a single render pass, Next.js automatically deduplicates identical fetch() calls (same URL and options), so calling the same fetch in multiple components only triggers one actual network request.

Data Cache 🗃️

The Data Cache persists fetch() results across requests and even across deployments, unlike request memoization which resets per-request. This is what powers static rendering and ISR.

Request Deduplication 🔁

Deduplication ensures that even if getUser() is called from five different components in the same tree, only one network request is made — as long as the underlying fetch() call is identical.

export async function getUser(id: string) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  return res.json();
}

Revalidation 🔄

Revalidation refreshes cached data without requiring a full rebuild. Next.js supports both automatic, time-based revalidation and manual, on-demand revalidation triggered from your own code.

Time-Based Revalidation ⏰

Passing a revalidate value (in seconds) to fetch(), or exporting it from a route segment, tells Next.js to treat cached data as stale after that interval and regenerate it in the background.

export default async function Products() {
  const products = await fetch("https://api.example.com/products", {
    next: { revalidate: 3600 },
  }).then((r) => r.json());

  return <p>{products.length} products</p>;
}

On-Demand Revalidation 🎯

On-demand revalidation lets you invalidate cached data immediately, right after a mutation happens — for example, clearing a product page's cache the moment its price is updated.

"use server";

import { revalidatePath } from "next/cache";

export async function updateProduct(id: string) {
  await db.products.update(id);
  revalidatePath(`/products/${id}`);
}

revalidatePath 🛣️

revalidatePath clears the cache for a specific route (and its data), forcing Next.js to regenerate that path on the next visit.

"use server";

import { revalidatePath } from "next/cache";

export async function publishPost() {
  await createPost();
  revalidatePath("/blog");
}

revalidateTag 🏷️

revalidateTag invalidates every cached fetch() call sharing a given tag, regardless of which route it was fetched from — ideal for data used across multiple pages.

"use server";

import { revalidateTag } from "next/cache";

export async function updateInventory() {
  await db.inventory.update();
  revalidateTag("inventory");
}

Cache Tags 🏷️

Cache tags are labels attached to a fetch() call via next: { tags: [...] }, allowing many separate requests across different routes to be invalidated together with a single revalidateTag call.

export async function getInventory() {
  const res = await fetch("https://api.example.com/inventory", {
    next: { tags: ["inventory"] },
  });
  return res.json();
}

unstable_cache 🧪

unstable_cache extends caching benefits to non-fetch data sources, like direct database queries, letting you wrap any async function with the same tag-based revalidation model.

import { unstable_cache } from "next/cache";

export const getPosts = unstable_cache(
  async () => db.posts.findMany(),
  ["posts"],
  { tags: ["posts"], revalidate: 3600 }
);

cache() ♻️

React's cache() function memoizes the result of any function — not just fetch() — within a single render pass, which is useful for deduplicating direct database calls across components.

import { cache } from "react";

export const getUser = cache(async (id: string) => {
  return db.users.findUnique({ where: { id } });
});

Fetch Options ⚙️

Error Handling ⚠️

Wrapping data fetching in a try/catch block, combined with an error.tsx file for uncaught errors, gives you full control over how fetch failures are surfaced to the user.

export default async function Products() {
  const res = await fetch("https://api.example.com/products");
  if (!res.ok) {
    throw new Error("Failed to fetch products");
  }
  const products = await res.json();
  return <p>{products.length} products</p>;
}

Loading States ⏳

A loading.tsx file automatically wraps a route in a <Suspense> boundary, showing instant feedback while async data fetching completes.

export default function Loading() {
  return <p>Loading products…</p>;
}

Empty States 📭

Always handle the case where a fetch succeeds but returns no data — an empty array or null result should render a friendly message rather than a blank or broken UI.

export default async function Orders() {
  const orders = await getOrders();
  if (orders.length === 0) {
    return <p>You haven't placed any orders yet.</p>;
  }
  return <List type="unordered">{orders.map((o) => <List.Item key={o.id}>{o.id}</List.Item>)}</List>;
}

Authentication Requests 🔐

Authenticated fetches typically attach a token or session cookie to the request headers. In Server Components, this often means reading cookies via cookies() and forwarding them manually.

import { cookies } from "next/headers";

export async function getProfile() {
  const token = cookies().get("session")?.value;
  const res = await fetch("https://api.example.com/profile", {
    headers: { Authorization: `Bearer ${token}` },
  });
  return res.json();
}

External APIs 🌍

Fetching from third-party APIs works the same way as any other fetch() call, but it's good practice to centralize API keys and base URLs in environment variables rather than hardcoding them.

export async function getWeather(city: string) {
  const res = await fetch(`https://api.weather.com/v1/${city}?key=${process.env.WEATHER_API_KEY}`);
  return res.json();
}

Database Queries 🗄️

Server Components can query a database directly using an ORM like Prisma or Drizzle, skipping the need for a REST or GraphQL API layer entirely.

import { prisma } from "@/lib/prisma";

export default async function Users() {
  const users = await prisma.user.findMany();
  return <List type="unordered">{users.map((u) => <List.Item key={u.id}>{u.name}</List.Item>)}</List>;
}

Data Fetching Patterns 🗂️

Performance Optimization 🚀

Best Practices ✅

Common Mistakes ⚠️

Frequently Asked Questions 💬

Summary 📌