Server-side state passing in NextJS - Deep Dive

Overview - Server-side state passing

What is it?

Server-side state passing in Next.js means sending data from the server to the page before it shows up in the browser. This allows the page to start with all the information it needs, making it faster and smoother for users. Instead of waiting for the browser to ask for data after loading, the server prepares everything first. This helps build websites that feel quick and responsive.

Why it matters

Without server-side state passing, pages would load empty or incomplete and then fill in data later, causing delays and flickers. This can frustrate users and hurt search engine rankings. Server-side state passing solves this by delivering ready-to-use data with the page, improving speed, user experience, and SEO. It also helps keep sensitive data safe by handling it on the server.

Where it fits

Before learning server-side state passing, you should understand basic React components and how Next.js pages work. After mastering this, you can explore client-side data fetching, API routes, and advanced caching strategies. This topic sits between rendering basics and full data management in Next.js.

Mental Model

Core Idea

Server-side state passing is like packing a suitcase with everything you need before a trip, so you don’t have to shop for essentials after arriving.

Think of it like...

Imagine you are going on a trip. Instead of buying clothes and toiletries after you arrive, you pack everything you need in your suitcase at home. When you get there, you can start your activities immediately without delays. Server-side state passing works the same way by preparing all data on the server before the page loads.

┌───────────────────────────────┐
│        Server (Next.js)        │
│ ┌───────────────┐             │
│ │ Fetch Data    │             │
│ └──────┬────────┘             │
│        │                      │
│ ┌──────▼────────┐             │
│ │ Prepare Props │             │
│ └──────┬────────┘             │
└───────┬┴──────────────────────┘
        │
        ▼
┌───────────────────────────────┐
│       Client Browser           │
│ ┌───────────────┐             │
│ │ Render Page   │             │
│ │ with Props    │             │
│ └───────────────┘             │
└───────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

What is server-side rendering

Concept: Introduce the idea that Next.js can build pages on the server before sending them to the browser.

Server-side rendering (SSR) means the server creates the full HTML for a page before sending it to the browser. This is different from client-side rendering, where the browser builds the page after loading JavaScript. SSR helps pages load faster and improves SEO because the content is ready immediately.

Result

Pages load with full content visible right away, improving speed and search engine friendliness.

Understanding SSR is key because server-side state passing depends on the server preparing data before rendering.

2

Foundation

Props and data flow in Next.js pages

Concept: Explain how Next.js pages receive data through props to render content.

In Next.js, pages are React components that get data through props. Props are like ingredients given to a recipe. The server or client can provide these props. When the page receives props, it uses them to show content. Without props, pages would have no data to display.

Result

Pages can show dynamic content based on the props they receive.

Knowing how props work helps you see how server-side data can be passed into pages.

3

Intermediate

Using getServerSideProps for state passing

🤔Before reading on: do you think getServerSideProps runs on the client or the server? Commit to your answer.

Concept: Learn the special Next.js function getServerSideProps that fetches data on the server for each request.

getServerSideProps is a function you export from a page file. Next.js runs it on the server every time someone visits the page. Inside it, you can fetch data from databases or APIs. The data you return becomes props for the page component. This means the page starts with all the data it needs.

Result

Page loads with fresh data on every request, improving user experience and SEO.

Understanding getServerSideProps shows how Next.js bridges server data and client rendering seamlessly.

4

Intermediate

Difference between getServerSideProps and getStaticProps

🤔Before reading on: which method do you think fetches data once at build time, and which fetches on every request? Commit to your answer.

Concept: Compare two Next.js data fetching methods to understand when to use server-side state passing.

getStaticProps runs once when you build your site and creates static pages. It’s great for content that doesn’t change often. getServerSideProps runs on every request, so it’s better for data that changes frequently or depends on the user. Choosing the right method affects performance and freshness of data.

Result

You know when to use server-side state passing for dynamic data versus static generation.

Knowing the difference helps optimize your app’s speed and data accuracy.

5

Advanced

Passing complex state with server-side props

🤔Before reading on: do you think you can pass functions or class instances via getServerSideProps? Commit to your answer.

Concept: Explore what kinds of data can be passed from server to client and how to handle complex state.

getServerSideProps can only return data that can be serialized to JSON, like objects, arrays, strings, and numbers. You cannot pass functions, class instances, or non-serializable data. To handle complex state, you convert it into plain data structures before returning. This ensures the client can use the data safely.

Result

You can pass rich data structures but must prepare them correctly for server-side state passing.

Understanding serialization limits prevents bugs and data loss when passing state.

6

Advanced

Security considerations in server-side state

🤔Before reading on: do you think sensitive data like passwords should be sent to the client via server-side props? Commit to your answer.

Concept: Learn how to keep sensitive information safe when passing state from server to client.

Server-side code can access secrets safely, but anything returned in getServerSideProps is sent to the browser. Never include passwords, API keys, or private data in props. Instead, keep sensitive logic on the server or use API routes with proper authentication. This protects users and your system.

Result

Your app avoids exposing secrets and stays secure while using server-side state passing.

Knowing what data to exclude from props is critical for building safe applications.

7

Expert

Optimizing server-side state for performance

🤔Before reading on: do you think fetching all data in getServerSideProps always improves performance? Commit to your answer.

Concept: Discover advanced techniques to balance data freshness and speed in server-side state passing.

Fetching all data on every request can slow down your server and increase response time. To optimize, fetch only necessary data, cache results when possible, or combine server-side state passing with client-side fetching for less critical info. You can also use incremental static regeneration or edge functions to improve speed. Profiling and monitoring help find bottlenecks.

Result

Your app delivers fast pages with fresh data without overloading the server.

Understanding trade-offs in data fetching strategies helps build scalable, responsive apps.

Under the Hood

Next.js runs getServerSideProps on the server for each page request. It executes before rendering the React component. The function fetches or computes data, then returns it as props in a plain JavaScript object. Next.js serializes this data to JSON and sends it along with the HTML to the browser. The React component receives these props and renders the page immediately with the data. This process happens on the server, so the client gets a fully formed page with state baked in.

Why designed this way?

This design balances performance, SEO, and developer experience. Running data fetching on the server ensures fresh data and avoids exposing sensitive logic. Returning props as JSON keeps data transfer simple and compatible with React. Alternatives like client-side fetching delay content and hurt SEO. Static generation is faster but less dynamic. This method gives developers control over when and how data is fetched.

┌───────────────┐       ┌─────────────────────┐       ┌───────────────┐
│ Client Request│──────▶│ Next.js Server      │──────▶│ getServerSideProps│
└───────────────┘       │ Fetch Data & Prepare │       └───────────────┘
                        │ Props (JSON)        │
                        └─────────┬───────────┘
                                  │
                        ┌─────────▼───────────┐
                        │ Render React Page    │
                        │ with Props           │
                        └─────────┬───────────┘
                                  │
                        ┌─────────▼───────────┐
                        │ Send HTML + JSON to  │
                        │ Client Browser       │
                        └─────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does getServerSideProps run on the client or the server? Commit to your answer.

Common Belief: getServerSideProps runs on the client after the page loads.

Reality: getServerSideProps runs only on the server before the page is sent to the client.

Why it matters: Thinking it runs on the client leads to confusion about data freshness and security, causing wrong implementation choices.

Quick: Can you pass functions or class instances via getServerSideProps? Commit to your answer.

Common Belief: You can pass any JavaScript object, including functions, through getServerSideProps.

Reality: Only serializable data (plain objects, arrays, strings, numbers) can be passed; functions and class instances cannot be serialized.

Why it matters: Trying to pass non-serializable data causes runtime errors and broken pages.

Quick: Should you include API keys in the props returned by getServerSideProps? Commit to your answer.

Common Belief: It's safe to include API keys or passwords in server-side props because they come from the server.

Reality: Props are sent to the client, so including secrets exposes them publicly.

Why it matters: Exposing secrets risks security breaches and data leaks.

Quick: Does using getServerSideProps always make your page load faster? Commit to your answer.

Common Belief: Using getServerSideProps always improves page load speed because data is ready on the server.

Reality: Fetching data on every request can slow down response time if not optimized properly.

Why it matters: Assuming it always improves speed can lead to poor performance and unhappy users.

Expert Zone

1

getServerSideProps disables automatic static optimization, so pages always render on the server, affecting caching strategies.

2

You can combine server-side state passing with client-side hooks to update data after initial load for better UX.

3

Using edge functions with server-side state passing can reduce latency by running code closer to users.

When NOT to use

Avoid getServerSideProps for data that rarely changes; use getStaticProps with incremental static regeneration instead for better performance. For highly interactive pages, consider client-side fetching with SWR or React Query to reduce server load.

Production Patterns

In production, server-side state passing is used for user-specific dashboards, real-time data pages, and SEO-critical content. Developers often cache API responses inside getServerSideProps to balance freshness and speed. Combining it with authentication middleware ensures secure data delivery.

Connections

Client-side data fetching

Complementary pattern

Understanding server-side state passing clarifies when to fetch data on the server versus the client, helping build efficient hybrid data strategies.

Caching strategies

Builds on

Knowing how server-side state passing works helps optimize caching layers to improve performance and reduce server load.

Supply chain logistics

Analogous process

Just like packing and shipping goods before they reach stores ensures shelves are stocked on arrival, server-side state passing prepares data before the page reaches the user.

Common Pitfalls

#1 Including sensitive data in server-side props

Wrong approach:

export async function getServerSideProps() {
return { props: { apiKey: 'SECRET_KEY' } };
}

Correct approach:

export async function getServerSideProps() {
// Use apiKey only on server, do not send to client
const data = await fetchDataUsingSecret();
return { props: { data } };
}

Root cause:

Misunderstanding that props are sent to the client, exposing secrets unintentionally.

#2 Trying to pass functions in props

Wrong approach:

export async function getServerSideProps() {
function helper() { return 42; }
return { props: { helper } };
}

Correct approach:

export async function getServerSideProps() {
const value = 42;
return { props: { value } };
}

Root cause:

Not realizing that functions cannot be serialized and sent to the client.

#3 Fetching too much data on every request

Wrong approach:

export async function getServerSideProps() {
const allData = await fetchAllDatabaseRecords();
return { props: { allData } };
}

Correct approach:

export async function getServerSideProps() {
const recentData = await fetchRecentRecords();
return { props: { recentData } };
}

Root cause:

Assuming more data is always better without considering performance impact.

Key Takeaways

Server-side state passing in Next.js means fetching and preparing data on the server before the page loads in the browser.

getServerSideProps is the main method to fetch data on each request and pass it as props to pages, enabling fast, SEO-friendly rendering.

Only serializable data can be passed through server-side props; functions and secrets must be handled carefully to avoid errors and security risks.

Choosing between server-side and static data fetching affects performance and freshness; understanding this helps build efficient apps.

Optimizing server-side state passing involves balancing data needs, caching, and security to deliver fast and safe user experiences.