Server-side state passing in NextJS - Step-by-Step Execution

Concept Flow - Server-side state passing

User requests page

↓

Server runs server component

↓

Fetch or compute data on server

↓

Pass data as props to client component

↓

Client component renders with data

↓

User sees page with server data

The server receives a request, runs server code to get data, then passes that data to client components for rendering.

Execution Sample

NextJS

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

'use client';

function ClientComponent({ data }) {
  return <div>{data.message}</div>;
}

This code fetches data on the server, then passes it as a prop to a client component that renders it.

Execution Table

Step	Action	Data State	Component Rendered	Output
1	User requests page	No data yet	No component	Loading...
2	Server fetches data	data = { message: 'Hello from server' }	No component	Loading...
3	Server renders Page component	data passed as prop	Page renders ClientComponent	<div>Hello from server</div>
4	Client receives rendered HTML	data present in props	ClientComponent hydrated	<div>Hello from server</div>
5	User sees page	data displayed	ClientComponent visible	Hello from server

💡 Rendering completes after server data is passed and client component renders with it.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
data	undefined	{ message: 'Hello from server' }	{ message: 'Hello from server' }	{ message: 'Hello from server' }

Key Moments - 3 Insights

Why does the server fetch data before rendering the component?

Because the server component runs first and needs data to pass as props to the client component, as shown in step 2 and 3 of the execution table.

How does the client component get the server data?

The server passes the fetched data as props to the client component during rendering, so the client component receives it ready to display, as seen in step 3.

Why is the user not seeing 'Loading...' after the server fetch?

Because the server waits for data before rendering and sending HTML, so the user only sees the final rendered output, not intermediate loading states.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'data' after step 2?

A null

B { message: 'Hello from server' }

C undefined

D {}

💡 Hint

Check the 'Data State' column in step 2 of the execution table.

At which step does the ClientComponent first render with data?

A Step 3

B Step 1

C Step 4

D Step 5

💡 Hint

Look at the 'Component Rendered' column to see when ClientComponent renders.

If the server fetch fails and returns no data, what would change in the execution table?

A User would see the final output as normal

B ClientComponent would render with data anyway

C Data State at step 2 would be undefined or error

D Step 3 would be skipped

💡 Hint

Consider what happens if fetch does not return data at step 2.

Concept Snapshot

Server-side state passing in Next.js:
- Server components fetch or compute data first
- Data passed as props to client components
- Client components render with server data
- User sees fully rendered page with data
- No loading state on initial load

Full Transcript

In Next.js, when a user requests a page, the server runs the server component first. This server component fetches or computes the needed data. Once the data is ready, it passes it as props to client components. The client components then render using this data. The user receives a fully rendered page with the server data included, so they do not see loading states. This flow ensures fast, data-ready pages on first load.

Practice

1. What is the main purpose of getServerSideProps in Next.js?

easy

A. To manage browser cookies

B. To handle client-side routing

C. To style components dynamically

D. To fetch data on the server before rendering the page

Solution

1. Step 1: Understand getServerSideProps role

   This function runs on the server before the page loads to fetch or prepare data.

2. Step 2: Identify its main use

   It ensures the page has fresh data on first load and improves SEO by server-side rendering.

3. Final Answer:

   To fetch data on the server before rendering the page -> Option D

4. Quick Check:

   Server-side data fetching = A [OK]

Hint: Remember: server-side means before page shows [OK]

Common Mistakes:

• Confusing client-side routing with server-side data fetching
• Thinking it styles components
• Assuming it manages cookies directly

2. Which of the following is the correct syntax to export getServerSideProps in a Next.js page?

easy

A. export default getServerSideProps = () => ({ props: {} })

B. export async function getServerSideProps(context) { return { props: {} } }

C. function getServerSideProps() { return props: {} }

D. export getServerSideProps = async () => { return {} }

Solution

1. Step 1: Recall correct export syntax

   getServerSideProps must be an async function exported with the exact name.

2. Step 2: Check return structure

   It returns an object with a props key containing data for the page.

3. Final Answer:

   export async function getServerSideProps(context) { return { props: {} } } -> Option B

4. Quick Check:

   Correct async export with props = D [OK]

Hint: Use async function with named export and return props [OK]

Common Mistakes:

• Using arrow function without export keyword
• Returning object without wrapping props
• Using default export incorrectly

3. Given this code snippet in a Next.js page, what will be the rendered output?

export async function getServerSideProps() {
  return { props: { message: 'Hello from server' } };
}

export default function Page({ message }) {
  return <h1>{message}</h1>;
}

medium

A. <h1>Hello from server</h1>

B. Error: message is undefined

C. <h1>{message}</h1>

D. <h1>Hello from client</h1>

Solution

1. Step 1: Understand data flow

   getServerSideProps passes message as a prop to the page component.

2. Step 2: Render output

   The component receives message and renders it inside an <h1> tag.

3. Final Answer:

   <h1>Hello from server</h1> -> Option A

4. Quick Check:

   Server prop passed and rendered = A [OK]

Hint: Props from server appear as component parameters [OK]

Common Mistakes:

• Thinking props are undefined without client fetch
• Rendering literal {message} instead of value
• Confusing server message with client message

4. What is wrong with this getServerSideProps function?

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  return data;
}

medium

A. The returned props must be an object with a props key wrapping data

B. The fetch call is missing await

C. getServerSideProps cannot be async

D. The function should return data directly, not inside props

Solution

1. Step 1: Check fetch usage

   The fetch is awaited correctly, so no issue there.

2. Step 2: Check return structure

   The function must return an object with a props key containing an object. Here, data is returned directly, which is incorrect.

3. Final Answer:

   The returned props must be an object with a props key wrapping data -> Option A

4. Quick Check:

   Return { props: { ... } } not just data [OK]

Hint: Always wrap data inside props object in return [OK]

Common Mistakes:

• Returning data directly instead of inside props
• Forgetting to await fetch
• Thinking async is not allowed

5. You want to pass user data fetched from a database to a Next.js page using getServerSideProps. Which approach correctly handles the asynchronous fetch and passes the data safely to the page component?

hard

A. export async function getServerSideProps() {
const user = getUserFromDB();
return { props: user };
}

B. export function getServerSideProps() {
const user = getUserFromDB();
return { props: { user } };
}

C. export async function getServerSideProps() {
const user = await getUserFromDB();
return { props: { user } };
}

D. export async function getServerSideProps() {
const user = await getUserFromDB();
return user;
}

Solution

1. Step 1: Handle async data fetching

   The function must be async and await the database call to get user data.

2. Step 2: Return data wrapped in props object

   The returned object must have a props key containing an object with user data.

3. Final Answer:

   export async function getServerSideProps() { const user = await getUserFromDB(); return { props: { user } }; } -> Option C

4. Quick Check:

   Async await + return props object = C [OK]

Hint: Await async fetch and wrap result inside props [OK]

Common Mistakes:

• Not awaiting async database call
• Returning data directly without props wrapper
• Using non-async function for async fetch