Suggest an editImprove this articleRefine the answer for “Where does data fetching happen in Next.js - on the server or the client?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The short answer: **both on the server and on the client**. **Key point:** Next.js lets you choose where exactly to perform data fetching - it all depends on the mechanism used.Shown above the full answer for quick recall.Answer (EN)ImageThe 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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.