What can run in server components in NextJS - Step-by-Step Execution

Concept Flow - What can run in server components

Start Server Component

↓

Run Server-only Code

↓

Fetch Data from DB or API

↓

Render JSX to HTML

↓

Send HTML to Client

↓

Client Hydrates Interactive Parts

↓

End

Server components run only on the server, fetching data and rendering HTML before sending it to the client.

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 from an API and renders it as HTML on the server.

Execution Table

Step	Action	Code Executed	Result
1	Start Server Component	Page() function called	Component starts on server
2	Fetch Data	await fetch('https://api.example.com/data')	Data fetched from API
3	Parse JSON	await data.json()	JSON object received
4	Render JSX	return <div>{json.message}</div>	HTML string created with message
5	Send HTML	Server sends HTML to client	Client receives rendered HTML
6	Client Hydration	Client hydrates interactive parts	Page becomes interactive
7	End	Component rendering complete	No client-side code ran during render

💡 Server component finishes after rendering HTML and sending it to client; no client JS runs during server render.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
data	undefined	Response object from fetch	Response object	Response object
json	undefined	undefined	Parsed JSON object	Parsed JSON object

Key Moments - 3 Insights

Can server components run browser-only code like accessing window or document?

No, server components run only on the server where browser objects like window or document do not exist. See execution_table step 7 where no client JS runs during server render.

Can server components fetch data directly from a database?

Yes, server components can run server-only code like database queries or API calls as shown in execution_table steps 2 and 3.

Does server component code run on the client?

No, server component code runs only on the server. The client receives only the rendered HTML and hydrates interactive parts separately (execution_table step 6).

Visual Quiz - 3 Questions

Look at the execution table, at which step is data fetched from the API?

A Step 4

B Step 2

C Step 6

D Step 1

💡 Hint

Check the 'Action' column for 'Fetch Data' in the execution_table.

According to variable_tracker, what is the value of 'json' after step 3?

A Parsed JSON object

B Response object

C undefined

D null

💡 Hint

Look at the 'json' row and the 'After Step 3' column in variable_tracker.

If you try to use 'window' inside this server component, what happens?

A It works normally on the server

B It runs only after client hydration

C It causes an error because 'window' is not defined on the server

D It delays the server render

💡 Hint

Refer to key_moments about browser-only code in server components.

Concept Snapshot

Server Components in Next.js run only on the server.
They can fetch data from APIs or databases directly.
They render JSX to HTML before sending to the client.
No browser-only code (like window or document) can run here.
Client receives static HTML and hydrates interactive parts separately.

Full Transcript

Server components in Next.js run exclusively on the server. When a server component is called, it can perform server-only tasks such as fetching data from APIs or databases. The component then renders JSX into HTML on the server. This HTML is sent to the client, which then hydrates any interactive parts. Server components cannot use browser-specific objects like window or document because these do not exist on the server. The execution table shows the step-by-step process from starting the component, fetching data, rendering HTML, sending it to the client, and client hydration. The variable tracker shows how variables like the fetched data and parsed JSON change during execution. Key moments clarify common confusions about what can and cannot run in server components. The visual quiz tests understanding of these steps and concepts.

Practice

1. Which of the following can you safely run inside a Next.js server component?

easy

A. Manipulating the DOM directly

B. Accessing a database directly

C. Adding event listeners for user clicks

D. Using browser APIs like localStorage

Solution

1. Step 1: Understand server component environment

   Server components run only on the server, so they can use server-only features like database access.

2. Step 2: Identify client-only features

   Browser APIs, event listeners, and DOM manipulation require client-side JavaScript and cannot run in server components.

3. Final Answer:

   Accessing a database directly -> Option B

4. Quick Check:

   Server-only code = Access database [OK]

Hint: Server components run server code only, no browser APIs [OK]

Common Mistakes:

• Thinking client APIs like localStorage work in server components
• Trying to add event listeners in server components
• Assuming DOM manipulation is possible on server

2. Which syntax correctly imports a server-only module inside a Next.js server component?

easy

A. import localStorage from 'localStorage';

B. import { useState } from 'react';

C. import window from 'window';

D. import fs from 'fs';

Solution

1. Step 1: Recognize server-only modules

   Modules like 'fs' (file system) are server-only and can be imported in server components.

2. Step 2: Identify invalid imports

   useState is client-side React hook, window and localStorage are browser globals, not importable modules.

3. Final Answer:

   import fs from 'fs'; -> Option D

4. Quick Check:

   Server module import = fs [OK]

Hint: Only import Node.js modules like fs in server components [OK]

Common Mistakes:

• Importing client hooks like useState in server components
• Trying to import browser globals as modules
• Confusing client and server imports

3. Given this server component code, what will be rendered?

import fs from 'fs';
export default function Page() {
  const data = fs.readFileSync('data.txt', 'utf8');
  return <div>{data}</div>;
}

medium

A. Contents of data.txt file inside a div

B. Error: fs module not found

C. Empty div with no content

D. Client-side error about fs usage

Solution

1. Step 1: Understand server component execution

   The code runs on the server, so fs.readFileSync reads the file content successfully.

2. Step 2: Render the file content

   The content read from 'data.txt' is returned inside a div and sent as HTML to the client.

3. Final Answer:

   Contents of data.txt file inside a div -> Option A

4. Quick Check:

   Server read file = content rendered [OK]

Hint: Server components can read files and render content directly [OK]

Common Mistakes:

• Thinking fs is unavailable in server components
• Expecting client-side errors for server code
• Assuming empty output without file content

4. What is wrong with this server component code?

export default function Page() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

medium

A. Both A and B

B. onClick handlers are not allowed in server components

C. useState cannot be used in server components

D. No error, code works fine

Solution

1. Step 1: Check React hooks usage in server components

   useState is a client-side hook and cannot be used in server components.

2. Step 2: Check event handlers in server components

   onClick handlers require client-side JavaScript and are not supported in server components.

3. Final Answer:

   Both A and B -> Option A

4. Quick Check:

   useState + onClick invalid in server components [OK]

Hint: No React hooks or event handlers in server components [OK]

Common Mistakes:

• Using useState in server components
• Adding client event handlers in server components
• Assuming server components can handle user events

5. You want to fetch data from a database and display it in a Next.js app. Which approach best uses server components to improve performance and security?

hard

A. Fetch data in the browser using fetch API directly

B. Fetch data inside a client component using useEffect

C. Fetch data inside a server component and pass it as props to a client component

D. Fetch data in a client component and store it in localStorage

Solution

1. Step 1: Understand server component advantages

   Server components can securely fetch data on the server, avoiding exposing secrets or extra client JS.

2. Step 2: Use server component to fetch and pass data

   Fetching data in server component and passing it as props to client components optimizes performance and security.

3. Final Answer:

   Fetch data inside a server component and pass it as props to a client component -> Option C

4. Quick Check:

   Server fetch + props passing = best practice [OK]

Hint: Fetch data server-side, then pass to client components [OK]

Common Mistakes:

• Fetching data only on client causing slower load
• Exposing secrets by fetching in client
• Storing sensitive data in localStorage