Next.js App Router provides multiple data fetching strategies to fetch data efficiently, improve performance, and optimize SEO.
- Fetch data in Server and Client Components.
- Support static, dynamic, and revalidated data.
- Improve SEO with server-rendered content.
- Optimize performance using built-in caching.
Methods for Data Fetching
Given below are some data fetching methods used in Next.js to handle data at build time, request time, or on the client side:
1. Static Data Fetching
Static data fetching retrieves data during the build process and serves the cached content for every request. It is suitable for content that changes infrequently, such as documentation, marketing pages, or product catalogs.
- Fetches and caches data during the build process.
- Returns cached content for faster performance.
- Improves SEO with pre-rendered pages.
- Best for infrequently changing data.
Syntax:
export default async function Page() {
const res = await fetch("https://api.example.com/data", {
cache: "force-cache",
});
const data = await res.json();
return <div>{/* Render data */}</div>;
}
2. Dynamic Data Fetching
Dynamic data fetching retrieves fresh data for every incoming request. It is useful for applications where content changes frequently, such as dashboards, user profiles, or live reports.
- Fetches fresh data on every request.
- Ensures users always receive the latest content.
- Suitable for dynamic applications.
- Always serves the latest available data.
Syntax:
export default async function Page() {
const res = await fetch("https://api.example.com/data", {
cache: "no-store",
});
const data = await res.json();
return <div>{/* Render data */}</div>;
}
3. Revalidated Data Fetching
Revalidated data fetching serves cached content while automatically refreshing it after a specified interval. It combines the speed of static generation with periodic updates.
- Serves cached content.
- Automatically revalidates cached data after a specified interval.
- Reduces server load.
- Ideal for blogs, news, and product listings.
Syntax:
export default async function Page() {
const res = await fetch("https://api.example.com/data", {
next: {
revalidate: 60,
},
});
const data = await res.json();
return <div>{/* Render data */}</div>;
}
4. Client-side Data Fetching
Client-side data fetching retrieves data in the browser after the page loads. It is commonly used for interactive features, user-specific content, and real-time updates.
- Fetches data after page load.
- Runs inside Client Components using React hooks.
- Supports real-time updates.
- Works with React hooks or libraries like SWR.
Syntax:
"use client";
import { useEffect, useState } from "react";
export default function Page() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://api.example.com/data")
.then((res) => res.json())
.then(setData);
}, []);
return <div>{/* Render data */}</div>;
}
When to Use Each Data Fetching Method
- Static Data Fetching: Use for content that changes infrequently, such as documentation or marketing pages.
- Dynamic Data Fetching: Use for content that must be updated on every request, such as dashboards or user profiles.
- Revalidated Data Fetching: Use for mostly static content that requires periodic updates, such as blogs or news sites.
- Client-side Data Fetching: Use for interactive, user-specific, or real-time content.
Note: These data fetching methods are supported in the Next.js App Router and use the built-in fetch() API with different caching strategies.
