Server-only modules in NextJS - Step-by-Step Execution

Concept Flow - Server-only modules

Import server-only module

↓

Code runs on server

↓

Server-only code executes

↓

No client bundle inclusion

↓

Server sends data to client

↓

Client renders with server data

Server-only modules are imported and run only on the server, never sent to the browser, ensuring secure and efficient code separation.

Execution Sample

NextJS

import { getSecretData } from './server-only';

export default function Page() {
  const data = getSecretData();
  return <div>{data}</div>;
}

This code imports a server-only module and uses its data inside a React component rendered on the server.

Execution Table

Step	Action	Module Loaded	Execution Context	Result
1	Import server-only module	server-only.js	Server	Module loaded successfully
2	Call getSecretData()	server-only.js	Server	Returns secret data string
3	Render Page component	N/A	Server	HTML with secret data generated
4	Send HTML to client	N/A	Server	Client receives rendered HTML
5	Client renders component	N/A	Client	Displays secret data (no server code included)

💡 Execution stops after client renders; server-only code never runs or appears on client.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
data	undefined	"Top secret info"	"Top secret info"	"Top secret info"

Key Moments - 2 Insights

Why doesn't the server-only module code appear in the client bundle?

Because server-only modules run only on the server and Next.js excludes them from client bundles, as shown in execution_table step 1 and 5.

Can client-side code call functions from server-only modules?

No, client-side code cannot call server-only functions directly; they only receive the rendered output or data from the server, as seen in step 5.

Visual Quiz - 3 Questions

Look at the execution table, at which step is the server-only module first loaded?

A Step 3

B Step 1

C Step 5

D Step 2

💡 Hint

Check the 'Module Loaded' and 'Execution Context' columns in the execution_table.

According to variable_tracker, what is the value of 'data' after step 2?

A undefined

B null

C "Top secret info"

D empty string

💡 Hint

Look at the 'After Step 2' column for variable 'data' in variable_tracker.

If the server-only module was accidentally imported in client code, what would happen?

A Build would fail or client bundle would include server code

B Code runs normally on client

C Server-only code runs twice

D Nothing changes

💡 Hint

Recall that server-only modules are excluded from client bundles as per execution_table step 1 and 5.

Concept Snapshot

Server-only modules in Next.js:
- Imported only in server code
- Never included in client bundles
- Used for secure or heavy logic
- Server runs module, sends data to client
- Client renders without server code

Full Transcript

Server-only modules in Next.js are special files imported only on the server side. When you import such a module, Next.js ensures it runs only on the server and is not sent to the browser. This keeps sensitive code safe and reduces client bundle size. In the example, the server-only module is imported and called during server rendering. The server generates HTML with the secret data and sends it to the client. The client displays the data but never runs or sees the server-only code. This separation is clear in the execution steps and variable tracking. Beginners often wonder why server code is not in the client bundle or if client code can call server-only functions. The answer is no, client code only receives rendered output or data from the server. If server-only modules are mistakenly imported in client code, the build will fail or include unwanted code. This visual trace helps understand how Next.js handles server-only modules safely and efficiently.