Dynamic Data Fetching in Next.js

In this tutorial, you will learn Dynamic Data Fetching in Next.js

What is Dynamic Data Fetching?

It means Data is fetched at request time, and the page is rendered on the server for every incoming request.

How does it work?

1. Data is fetched on each request.

2. HTML is generated dynamically.

Common methods

1. getServerSideProps() (Pages Router)

2. fetch() with cache: ‘no-store’ (App Router)

3. Dynamic Server Components

Example:


async function getUser() {
const res = await fetch('https://api.example.com/user', {
cache: 'no-store'
});
return res.json();
}


export default async function Page() {
const user = await getUser();

return <h1>Welcome, {user.name}</h1>;
}

Advantages

There are many advantages.

1. It always has fresh data.

2. It is used for real-time updates.

Disadvantages

There are many disadvantages.

1. It is slower than static pages.

2. Higher server cost.