Suggest an editImprove this articleRefine the answer for “What ways of fetching data exist in Next.js?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Next.js** has several ways to fetch data: SSR, SSG, ISR, client-side fetching, Route Handlers, and fetching data directly in Server Components. **Key point:** the choice of method depends on how often the data updates, SEO requirements, and where the code runs (server or browser).Shown above the full answer for quick recall.Answer (EN)ImageNext.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**.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.