Server component restrictions in NextJS - Step-by-Step Execution

Concept Flow - Server component restrictions

Start Server Component

↓

Check for Client-only APIs

↓

Error: Not Allowed

↓

Fetch Data, Access DB

↓

Return JSX Output

↓

End

Server components start rendering, check for disallowed client APIs, error if found, otherwise fetch data and return JSX.

Execution Sample

NextJS

export default function Page() {
  const data = fetchData();
  return <h1>{data.title}</h1>;
}

A server component fetches data and returns JSX with the data title.

Execution Table

Step	Action	Check	Result	Notes
1	Start rendering Server Component	N/A	Continue	Begin server-side rendering
2	Check for client-only APIs (e.g., useState)	No client APIs used	Pass	Allowed in server components
3	Call fetchData()	Allowed server API	Data fetched	Data retrieved from DB or API
4	Return JSX <h1>{data.title}</h1>	Valid JSX	Rendered output	Server component returns HTML
5	End rendering	N/A	Success	Component rendered on server

💡 Rendering stops if client-only APIs are detected, otherwise completes successfully.

Variable Tracker

Variable	Start	After Step 3	Final
data	undefined	{ title: 'Hello World' }	{ title: 'Hello World' }

Key Moments - 2 Insights

Why can't I use useState or useEffect in a server component?

Server components run only on the server and do not have access to browser APIs or React client hooks like useState or useEffect, as shown in step 2 of the execution_table where client APIs cause an error.

Can server components fetch data directly?

Yes, server components can fetch data directly from databases or APIs during rendering, as shown in step 3 where fetchData() runs on the server.

Visual Quiz - 3 Questions

Look at the execution table, what happens if a client-only API is used in step 2?

A An error occurs and rendering stops

B The API is ignored

C Rendering continues normally

D The component switches to client rendering

💡 Hint

Refer to step 2 in the execution_table where client APIs cause an error.

At which step is data fetched in the server component?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Check the 'Action' column in the execution_table for fetchData() call.

If you add useState inside the server component, how does the variable tracker change?

A data variable will be undefined

B data variable will hold useState value

C Rendering will stop before data is set

D No change to variable tracker

💡 Hint

Refer to key_moments and execution_table step 2 about client-only API restrictions.

Concept Snapshot

Server components run only on the server.
They cannot use client-only APIs like useState or useEffect.
They can fetch data directly during rendering.
If client APIs are used, rendering errors out.
They return JSX that renders as HTML on the server.

Full Transcript

Server components in Next.js run only on the server side. When rendering starts, the system checks if any client-only APIs like useState or useEffect are used. If found, rendering stops with an error because these hooks require browser environment. Otherwise, the server component can fetch data directly from databases or APIs during rendering. After fetching data, it returns JSX that renders as HTML on the server. This process ensures server components are fast and secure by avoiding client-side dependencies.