Server-Side Rendering (SSR) Deep Dive

Server-Side Rendering (SSR) in Next.js

1. What is SSR

Server-Side Rendering (SSR) means a page is pre-rendered for every incoming request,
instead of being generated at build time like in SSG.

SSR is useful when:

• You need up-to-date data on every request.
• You must access the request object (e.g., cookies, headers, session data).
• Data changes too frequently for revalidate (ISR) to be sufficient.

2. getServerSideProps() — Request-Time Data Fetching

This function runs on the server for every request.
It never runs on the client, and no pre-built HTML is stored.

export async function getServerSideProps(context) {
  const { params } = context;
  const userId = params.uid;

  return {
    props: {
      id: "userid-" + userId,
    },
  };
}

Notes:

• Runs at request time, not during build.
• Returns props passed into the page component.
• Ideal for content that depends on user session, authentication, or live data.

3. Difference from SSG

4. Example with Dynamic Routes

In SSR, we don’t need getStaticPaths() because no pages are generated at build time. The server dynamically handles all routes at runtime.

// pages/[uid].js
export async function getServerSideProps(context) {
  const { params } = context;
  const userId = params.uid;

  return {
    props: {
      id: "userid-" + userId,
    },
  };
}

export default function UserPage(props) {
  return <h1>User ID: {props.id}</h1>;
}

Explanation

• [uid].js is a dynamic route.
• When a user visits /u123, the server:
  1. Receives the request.
  2. Runs getServerSideProps(context) with context.params.uid = "u123".
  3. Renders and returns the full HTML page to the client.

5. context Object in getServerSideProps(context)

context provides detailed information about the incoming request.