How does Next.js load data on the server?

Next.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 type