Server state vs client state in NextJS - Visual Side-by-Side Comparison

Concept Flow - Server state vs client state

Start: User requests page

↓

Server fetches data

↓

Server sends HTML + data

↓

Client receives HTML + data

↓

Client renders UI with initial data

↓

Client updates state on user actions

↓

Client may fetch new data (server state) asynchronously

↓

UI updates with new server or client state

Shows how data flows from server to client and how client manages its own state after receiving server data.

Execution Sample

NextJS

export default function Page() {
  const [count, setCount] = useState(0);
  const { data } = useQuery('todos');
  return <div>{data.length} todos, count: {count}</div>;
}

A Next.js component showing server-fetched data (todos) and client state (count) together.

Execution Table

Step	Action	Server State	Client State	UI Rendered
1	User requests page	No data yet	No state yet	Loading or empty
2	Server fetches todos	todos = [todo1, todo2]	No state yet	Server prepares HTML with todos count=2
3	Server sends HTML + data	todos = [todo1, todo2]	No state yet	Page shows '2 todos, count: 0' (count default)
4	Client receives HTML + data	todos = [todo1, todo2]	count = 0	Page shows '2 todos, count: 0'
5	User clicks increment	todos = [todo1, todo2]	count = 1	Page updates to '2 todos, count: 1'
6	Client fetches new todos	todos = [todo1, todo2, todo3]	count = 1	Page updates to '3 todos, count: 1'
7	User clicks increment again	todos = [todo1, todo2, todo3]	count = 2	Page updates to '3 todos, count: 2'

💡 User stops interacting; client and server states are synced as needed.

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 6	After Step 7
todos	undefined	[todo1, todo2]	[todo1, todo2]	[todo1, todo2, todo3]	[todo1, todo2, todo3]
count	undefined	0	1	1	2

Key Moments - 3 Insights

Why does the UI show 'count: 0' before any user clicks?

Because the client state 'count' is initialized to 0 on first render (see Step 4 in execution_table). Server state 'todos' is fetched separately.

How can client state and server state change independently?

Client state like 'count' changes on user actions without server calls (Step 5), while server state like 'todos' updates only after fetching new data (Step 6).

Why does the UI update when new todos arrive from the server?

Because the client receives updated server state and re-renders UI to reflect new data (Step 6), showing '3 todos' instead of '2 todos'.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' at Step 5?

A 1

B 0

C 2

D undefined

💡 Hint

Check the 'Client State' column at Step 5 in the execution_table.

At which step does the server state 'todos' first include 3 items?

A Step 4

B Step 5

C Step 6

D Step 7

💡 Hint

Look at the 'Server State' column in the execution_table to see when todos change.

If the user never clicks increment, what will 'count' be after Step 7?

A 0

B 1

C 2

D undefined

💡 Hint

Refer to variable_tracker for 'count' changes and note user actions in execution_table.

Concept Snapshot

Server state is data fetched and stored on the server, sent to client on page load.
Client state is data managed inside the browser, changing with user actions.
Server state updates require fetching new data; client state updates happen instantly.
UI combines both states to show current info.
In Next.js, server state often comes from data fetching hooks; client state from useState.
Understanding both helps build responsive, data-driven apps.

Full Transcript

This visual trace shows how server state and client state work together in a Next.js app. When a user requests a page, the server fetches data like todos and sends it with the HTML. The client receives this data and initializes its own state, such as a count starting at zero. When the user interacts, like clicking a button, the client state updates immediately without contacting the server. Later, the client can fetch new server data asynchronously, updating the UI again. The execution table tracks each step, showing server and client states and how the UI changes. Variable tracking highlights how todos and count change over time. Key moments clarify common confusions about initial values and independent updates. The quiz tests understanding of state values at different steps. This helps beginners see clearly how server and client states flow and update in a modern web app.