What is SSR in Next.js?

Key takeaways:

  • Server-side rendering (SSR) in Next.js pre-renders pages on the server, enhancing SEO and performance.

  • SSR results in faster initial page loads because the HTML is generated on the server and sent to the client fully formed, hence improving user experience

  • SSR optimizes content delivery and reduces client-side processing, making it ideal for complex applications.

  • Implementing SSR in Next.js is straightforward with the getServerSideProps function, which allows developers to fetch data and pre-render the page on each request.

Understanding server-side rendering (SSR) in Next.js

Server-side rendering (SSR) is a core feature of Next.js, a powerful React framework for building high-performance web applications. SSR refers to rendering web pages on the server before sending them to the client’s browser. This process ensures faster page loads and better SEO.

Why choose server-side rendering?

In traditional client-side rendering (CSR), the server sends a basic HTML file when a user visits a website. The browser then fetches additional JavaScript files and builds the webpage on the user’s device. This process can be slow, especially on slower internet connections or if the website has complex elements.

Learn more about rendering strategies like server side rendering in Next.js with this blog: Understanding rendering in Next.js.

SSR with Next.js addresses these issues by performing most of the rendering on the server. When a webpage is requested, the server executes JavaScript code, retrieves data from APIs, and renders the page as complete HTML content. This means that when the server sends the HTML to the client, the webpage is visible immediately without additional processing.

How does server-side rendering work in Next.js?

Next.js simplifies the SSR process with its built-in support. When a page request is made, Next.js invokes the getServerSideProps function to fetch data, perform computations, and render the HTML on the server before delivering it to the client.

export async function getServerSideProps() {
  // Fetch data from an API or perform any async operation
  const apiData = await fetch('https://educative.io/data').then(res => res.json());
  // Return the fetched api data as props
  return {
    props: {
      apiData,
    },
  };
}
The getServerSideProps function

Explanation

  • The getServerSideProps function runs on the server every time a page is requested. You need to define it inside a page component file.

  • It can fetch data from an API or database or perform any asynchronous operation.

  • The returned object with the props key contains the data that will be passed as props to the page component.

Want to build something interactive using Next.js? Try this project: Build an Interactive E-Library Using Next.js and Tailwind.

Workflow of SSR in Next.js

  1. A request is made to the server from the client.

  2. Next.js executes the necessary JavaScript code on the server.

  3. Data is fetched from APIs or databases, and computations are performed.

  4. The page is rendered as HTML and sent to the client’s browser.

  5. The client’s browser displays the pre-rendered page without additional processing delays.

Let's look at this workflow in the form of an illustration:

Workflow of SSR in Next.js
Workflow of SSR in Next.js

Benefits of using SSR in Next.js

  1. Improved SEO: SSR enables search engines to easily crawl and index your pages, improving search engine rankings and visibility.

  2. Faster initial page load: Pre-rendered HTML is sent from the server, resulting in shorter load times and a better user experience.

  3. Better performance on low-end devices: SSR reduces client-side processing, making your app more accessible and responsive for users with slower devices or internet connections.

  4. Efficient content delivery: Server-side data fetching reduces the number of API requests and optimizes bandwidth usage, enhancing the overall efficiency of your application.

Implementing SSR in Next.js with getServerSideProps

Next.js provides the getServerSideProps method to handle server-side rendering with ease. Here’s how to implement SSR in a Next.js application:

1. Set up a Next.js project

Run the following command in your terminal to create a new Next.js project:

npx create-next-app my-app

To get a hands on experince on Next.js rendering techniques, refer to the Build a Music Sharing App with Next.js and the MERN Stack project.

2. Create a HomePage component

Create a new file named index.js inside the pages directory. This will serve as our SSR-enabled page component.

Learn more about routing and Next.js directory structure, read this blog, Understanding routing in Next.js with the App Router.

We will add the following code in index.js file:

import React from 'react';
const HomePage = ({ serverRenderedData }) => {
  return (
    <div>
      <h1>Next.js SSR Example</h1>
      <p>{serverRenderedData}</p>
    </div>
  );
};
export async function getServerSideProps() {
  // Fetch data from an API or perform any async operation
  const serverRenderedData = 'Server-rendered data';
  // Return the data as props
  return {
    props: {
      serverRenderedData,
    },
  };
}
export default HomePage;
Explanation

  • We define a HomePage component that receives the serverRenderedData as a prop.

  • We fetch the data using the getServerSideProps method which runs on the server side.

  • The fetched data is then passed as a prop to the HomePage component.

3. Execute the application

To start the Next.js development server, run the following command in our terminal or command prompt:

npm run dev

Coding example

Below is a Next.js project created by implementing the above steps:

import React from 'react';

const HomePage = ({ serverRenderedData }) => {
  return (
    <div>
      <h1>Next.js SSR Example</h1>
      <p>{serverRenderedData}</p>
    </div>
  );
};

export async function getServerSideProps() {
  // Fetch data from an API or perform any async operation
  const serverRenderedData = 'Server-rendered data';

  // Return the data as props
  return {
    props: {
      serverRenderedData,
    },
  };
}

export default HomePage;
Implementation of SSR in Next.js

Explanation

  • Line 1: Import the necessary dependencies.

  • Lines 3–10: Define the HomePage component, which receives a prop called serverRenderedData and returns a <div> with an <h1> heading and a <p> paragraph displaying the value of the serverRenderedData prop.

  • Lines 12–22: Define the getServerSideProps function, which is a special Next.js function for server-side rendering. It assigns the string 'Server-rendered data' to the serverRenderedData variable and returns it as a prop.

  • Line 24: Export the HomePage component as the default export of the module.

Continue learning SSR in Next.js

Explore these projects for hands-on practice of SSR in Next.js:

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is the difference between CSR and SSR in Nextjs?

SSR pre-renders pages on the server, resulting in faster initial load times and better SEO. CSR, on the other hand, renders pages on the client side, which can lead to slower page loads and less optimal SEO performance.

How does SSR affect SEO in Next.js?

SSR improves SEO by providing fully rendered HTML to search engines, making it easier for them to crawl and index the content.

What are the performance benefits of SSR in Next.js?

SSR reduces client-side processing, leading to faster page loads and improved performance on low-end devices. It also optimizes content delivery by reducing the number of API requests.

How does getServerSideProps work in Next.js?

The getServerSideProps is a special function in Next.js that allows you to fetch data and render pages on the server. It runs every time a page is requested and returns the data as props to the page component.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved