What ways of fetching data exist in Next.js?

Next.js has several ways to fetch data. They differ in when exactly the data loads, where the code runs (on the server or in the browser), and how often the data updates.

---

#Main ways to fetch data

#1. Fetching data on the server on every request (SSR)

Data loads every time the user opens the page. The code runs only on the server.

When it fits:

• data changes often
• freshness matters (e.g., a user profile)
• data depends on cookies, headers, auth

Features:

• the user always sees fresh data
• the page loads slightly slower than a static one

---

#2. Fetching data at build time (SSG)

Data loads once, at build time, and the page becomes static.

When it fits:

• data barely changes
• blogs, landing pages, documentation
• public content

Features:

• very fast loading
• data does not update without a rebuild

---

#3. Incremental Static Regeneration (ISR)

This is an improved version of SSG. The page is static, but can be regenerated at a given interval.

When it fits:

• data updates, but not every second
• news, catalogs, marketplaces

Features:

• combines the speed of static content with freshness
• regeneration happens in the background

---

#4. Fetching data on the client (Client-side fetching)

Data loads in the browser after the page has rendered.

Usually fetch, axios, SWR, or React Query is used.

When it fits:

• data depends on user actions
• realtime updates
• not important for SEO

Features:

• the first render may have no data
• requests are visible in the browser's DevTools

---

#5. Using Route Handlers / API routes

Next.js allows creating your own API endpoints right inside the project.

Why this is needed:

• proxying requests to external APIs
• hiding secret keys
• combining several data sources
• handling forms

Features:

• run only on the server
• used like a regular backend API

---

#6. Fetching data in Server Components (App Router)

In the App Router, you can request data directly in the component, without separate functions.

What this gives:

• less boilerplate code
• requests run on the server
• you can use async/await directly in the component

Important:

• such components do not end up in the browser's JS bundle
• excellent for working with a DB and APIs

---

#How to choose a method

Short decision logic:

• Always fresh data → server on request (SSR)
• Rarely changes → SSG
• Updates sometimes → ISR
• Depends on the user → client-side
• Need an API inside the project → Route Handlers
• App Router and server logic → Server Components

---

#Short summary

Next.js supports loading data:

• on the server on request
• at build time
• with automatic updates
• in the browser
• through built-in APIs
• directly in server components

The choice of method depends on how often the data updates, SEO requirements, and where the code runs.