What is the difference between client-side and server-side data loading?

The difference between client-side and server-side data loading in Next.js comes down to where the request runs, when the user gets the data, and what HTML arrives in the browser.

Let's go through it step by step, in plain language.

---

#Server-side data loading

#How it works

1. The user opens the page
2. The request reaches the Next.js server
3. The server fetches the data (from an API, a database, etc.)
4. The server builds the HTML already with the data
5. The ready HTML is sent to the browser

#What the user sees

• The page displays with content right away
• No "blank screen" and no waiting for data

#Pros

• Faster first display of the page
• Better for SEO
• Secret keys can be used
• Less logic and fewer requests in the browser

#Cons

• Every request to the page can load the server
• Not suited for interactive actions after the page has loaded

#When to use it

• Content pages (catalogs, articles, feeds)
• Data that's needed immediately
• SEO-critical pages

---

#Client-side data loading

#How it works

1. The server sends HTML without data
2. The browser loads the JavaScript
3. The JavaScript makes a request to an API
4. The data arrives
5. The UI updates

#What the user sees

• First an empty state / loading
• Then content appears

#Pros

• Less load on the server
• Great for interactivity
• Data can be refreshed without a page reload

#Cons

• Slower first display of the data
• Worse for SEO
• Secrets can't be used

#When to use it

• Forms
• Filters
• Likes, comments
• Data that's updated often

---

#The main difference: the HTML

Server-side loading -> the HTML arrives already with the data

Client-side loading -> the HTML arrives "empty", the data loads in later

---

#What this looks like in Next.js

In Next.js you can combine both approaches:

• Server:
  • Server Components
  • fetch on the server
• Client:
  • Client Components
  • useEffect, SWR, React Query

A common scenario:

• the server loads the page's main data
• the client loads additional or frequently updated data

---

#Quick comparison

---

#The key thing to remember

• Server-side loading is for primary content
• Client-side loading is for dynamics and interactivity
• Next.js lets you conveniently mix both approaches