Where does data fetching happen in Next.js - on the server or the client?

The short answer: both on the server and on the client. Next.js lets you choose where exactly to perform data fetching - it all depends on the mechanism used.

---

#Data fetching on the server

Requests run before the HTML is sent to the browser.

#Where this happens:

• Server Components (App Router)
• Server-side rendering (SSR)
• Static generation (SSG)
• Incremental Static Regeneration (ISR)
• Route Handlers / API routes

#What this gives you:

• the user immediately gets HTML with data
• better for SEO
• you can use private API keys
• you can talk to the database directly
• less JavaScript goes to the browser

Important: code with server-side fetching doesn't end up in the client bundle.

---

#Data fetching on the client

Requests run in the browser, after the page's first render.

#Where this happens:

• Client Components ("use client")
• useEffect, event handlers
• fetch, axios, SWR, React Query

#When this is needed:

• data depends on user actions
• realtime updates
• data isn't critical for SEO
• personal data (for example, dashboards)

#Downsides:

• the first render may be without data
• you need to show a loader
• requests are visible in the browser's DevTools

---

#App Router specifics

In the App Router, all components are server components by default. This means a regular fetch or await in a component runs on the server.

For a request to run on the client, you need to:

• explicitly add "use client"
• or make the request inside useEffect

---

#Can they be combined?

Yes, and this is common practice:

• the server delivers the main content
• the client loads in interactive or user-specific data

Example:

• the server renders the product list
• the client loads in filters, status, favorites

---

#How to quickly tell where code will run

• Server Component / SSR / SSG / ISR -> server
• Client Component / useEffect -> client
• Route Handler -> server

---

#Short summary

In Next.js, data fetching can happen:

• on the server - before the HTML is sent, safe and good for SEO
• on the client - in the browser, after rendering

In the App Router, server-side fetching is the default option, and client-side fetching is used selectively, when it can't be avoided.