Suggest an editImprove this articleRefine the answer for “How does Next.js load data on the server?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)Next.js loads data **on the server** before the page is sent to the user's browser, so the HTML is formed already with the data in it, instead of being "empty" with a follow-up load through JavaScript. **Key point:** the server-side loading methods differ in when and how often the data is requested - during a Server Component's render, through a cached `fetch`, dynamically on every request, at build time, or with periodic revalidation.Shown above the full answer for quick recall.Answer (EN)ImageNext.js loads data **on the server** before the page is sent to the user's browser. This means the HTML is formed already with the data in it, instead of being "empty" with a follow-up load through JavaScript. Next.js has several main ways of loading data on the server - they differ in **when** and **how often** that data is requested. --- ## 1. Loading data during the server render (Server Components) In modern Next.js (App Router), **components run on the server by default**. This means you can query a database or an API right inside the component. Example of the logic: - a request comes in from the user - the server executes the component - inside the component a `fetch` or a DB query is made - the server builds the HTML - the ready HTML is sent to the browser Important: - this code **never ends up in the browser** - you can safely use secrets (tokens, keys) - data loads faster because there is no extra request from the client --- ## 2. `fetch` on the server (cached by default) When you use `fetch` inside a server component: - the request runs **on the server** - Next.js automatically **caches the result**, unless you explicitly say otherwise Example of the behavior: - first request -> data is loaded from the API - subsequent requests -> data is taken from the cache - the server does not make a repeat HTTP request unless it needs to This makes loading data: - faster - more stable - cheaper (fewer requests) --- ## 3. Dynamic data loading (no cache) Sometimes data must always be **up to date** (for example, a user profile). In that case: - Next.js loads data **on every request** - the cache is disabled In essence: - the user opened the page - the server went to get the data again - the HTML was assembled from scratch This approach fits: - authenticated data - personal pages - frequently changing information --- ## 4. Loading data at build time (Static Generation) Next.js can load data **once - when the project is built**. How it works: - during `build` - the server makes requests to an API or a database - the HTML is saved as a static file - users get an already ready page Pros: - very fast - excellent performance - minimal load on the server Con: - data does not update without a rebuild (unless a refresh mechanism is used) --- ## 5. Updating data without a full rebuild (revalidation) Next.js can **refresh data** on the server: - on a schedule (for example, once every 60 seconds) - on an event (for example, after the data changes) The process looks like this: - the user opens the page - if the cache is "fresh" - the old HTML is served - if it's stale - the server refreshes the data and the cache This is a balance between: - how up to date the data is - how fast it loads --- ## The short picture as a whole When Next.js loads data on the server: - the requests run **before the HTML is sent** - the data can be: - cached - dynamic - static - the developer controls this through `fetch` settings and the render typeFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.