Why data fetching differs in Next.js - Visual Breakdown

Concept Flow - Why data fetching differs in Next.js

Start: User requests page

↓

Is page a Server Component?

No→Client Component fetches data on client

Yes↓

Server Component fetches data on server

↓

Render page with fetched data

↓

Send HTML to browser

↓

Browser hydrates page

↓

Client-side interactivity continues

Next.js fetches data differently depending on whether the component runs on the server or client, affecting when and where data is loaded.

Execution Sample

NextJS

export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  return <div>{json.message}</div>;
}

This Server Component fetches data on the server before rendering the page.

Execution Table

Step	Action	Location	Result	Effect
1	User requests page	Browser	Request sent to Next.js server	Start data fetching process
2	Page component runs	Server	fetch() called	Data requested from API
3	Await fetch response	Server	Data received	Data ready for rendering
4	Parse JSON	Server	JSON parsed	Data accessible as object
5	Render JSX with data	Server	<div>message</div>	HTML generated with data
6	Send HTML to browser	Server -> Browser	HTML received	Page visible with data
7	Browser hydrates page	Browser	React attaches events	Page interactive
8	User interacts	Browser	Client-side code runs	Dynamic updates possible
9	If Client Component fetches data	Browser	fetch() called on client	Data fetched after page load
10	Exit	N/A	No more server fetch	Data fetching complete

💡 Data fetching ends after server renders or client fetches depending on component type

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
data	undefined	Promise pending	Response object	Response object	Response object
json	undefined	undefined	undefined	Parsed JSON object	Parsed JSON object

Key Moments - 3 Insights

Why does data fetching happen on the server in Server Components?

Because Server Components run on the server, they can fetch data before sending HTML to the browser, as shown in execution_table steps 2-6.

What happens if data fetching is done in a Client Component?

Data fetching occurs in the browser after the page loads, causing a delay in showing data, as seen in execution_table step 9.

Why is hydration important after server-side rendering?

Hydration attaches React's event handlers to the static HTML so the page becomes interactive, explained in execution_table step 7.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the server receive the data from the API?

A Step 3

B Step 5

C Step 7

D Step 9

💡 Hint

Check the 'Result' column for when 'Data received' happens on the server.

According to the variable tracker, when is the JSON data parsed?

A After Step 2

B After Step 3

C After Step 4

D Final

💡 Hint

Look at the 'json' variable value changes in the variable_tracker table.

If the page used only Client Components for data fetching, when would fetch() be called?

A Step 2

B Step 5

C Step 7

D Step 9

💡 Hint

Refer to execution_table step describing client-side fetch.

Concept Snapshot

Next.js data fetching differs by component type:
- Server Components fetch data on the server before rendering.
- Client Components fetch data in the browser after page load.
- Server fetching sends ready HTML to browser.
- Client fetching delays data display until after hydration.
- Hydration makes server-rendered pages interactive.

Full Transcript

When a user requests a Next.js page, the framework checks if the page uses Server Components or Client Components. Server Components run on the server and fetch data before rendering HTML. This means the user receives a fully rendered page with data already included. The browser then hydrates the page to add interactivity. If the page uses Client Components for data fetching, the browser fetches data after loading the page, causing a delay before data appears. This difference affects user experience and performance. The execution table shows each step from request to rendering and hydration, while the variable tracker follows data variables through the process. Key moments clarify why server fetching happens early and client fetching happens later. The quiz tests understanding of when data is fetched and parsed.