Server-side state passing in NextJS - Performance & Optimization

Performance: Server-side state passing

MEDIUM IMPACT

This affects the initial page load speed and time to interactive by controlling how much data is sent from server to client and how quickly the page renders.

Passing server-side data to a Next.js page for initial render

NextJS

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/summary').then(res => res.json());
  return { props: { summary: data.summary } };
}

export default function Page({ summary }) {
  return <div>{summary}</div>;
}

Passing only essential summary data reduces payload size and speeds up initial render.

📈 Performance GainSaves 150-400kb in payload, reduces LCP by 300-500ms

Passing server-side data to a Next.js page for initial render

NextJS

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/large-data').then(res => res.json());
  return { props: { data } };
}

export default function Page({ data }) {
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Fetching and passing a large amount of data causes a big JSON payload sent to the client, increasing load time and delaying rendering.

📉 Performance CostAdds 200-500kb to initial HTML payload, blocking LCP until data is parsed

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing large server-side state	No extra DOM nodes	1 reflow after hydration	High paint cost due to delayed hydration	[X] Bad
Passing minimal server-side state	No extra DOM nodes	1 reflow after hydration	Low paint cost with fast hydration	[OK] Good

Rendering Pipeline

Server-side state is serialized into the HTML sent to the browser. The browser parses this data during HTML parsing, then React hydrates the page using this state. Large state increases HTML size and parsing time, delaying style calculation and paint.

→HTML Parsing

→Style Calculation

→Layout

→Paint

→Hydration

⚠️ BottleneckHTML Parsing and Hydration

Core Web Vital Affected

LCP

This affects the initial page load speed and time to interactive by controlling how much data is sent from server to client and how quickly the page renders.

Optimization Tips

1Only pass the minimal necessary data from server to client.

2Avoid embedding large JSON objects in the HTML response.

3Use client-side fetching for non-critical data to speed up initial load.

Performance Quiz - 3 Questions

How does passing large server-side state in Next.js affect page load?

A Increases HTML size and delays Largest Contentful Paint

B Reduces JavaScript bundle size

C Improves hydration speed

D Has no effect on performance

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect the document request size and payload. Check the size of the HTML and JSON data embedded.

What to look for: Look for large HTML payload size and long blocking time before first contentful paint indicating heavy server-side state.

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