Understanding Server-Side Rendering (SSR) in Next.js

04 November 2024

Next.js has become a popular choice for React developers due to its powerful features, including Server-Side Rendering (SSR). In this blog post, we will explore what SSR is, its benefits, and how to implement it in a simple Next.js application. We'll create a page that fetches user data from a public API and displays it using SSR.

What is Server-Side Rendering?

Server-Side Rendering is a technique where web pages are rendered on the server rather than in the browser. In the context of Next.js, this means that when a user requests a page, the server generates the complete HTML for that page before sending it to the client. This approach provides several advantages: Improved SEO: Since search engines can easily index fully rendered pages, SSR is beneficial for SEO. Faster Initial Load: Users receive a complete HTML page on the first request, which enhances perceived performance, especially on slower networks. Better User Experience: SSR can reduce the time to first meaningful paint, making your application feel faster.

Implementing SSR in Next.js

Let's create a new page that fetches user data using SSR. Create a new file named users.tsx in the pages directory and add the following code:

Code

// pages/users.tsx

import React from 'react';

// Type definition for User
interface User {
  id: number;
  name: string;
  email: string;
}

// Function to fetch users from an API
async function fetchUsers(): Promise<User[]> {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();
  return data;
}

// Default export of the SSR page component
export default async function UsersPage() {
  const users = await fetchUsers(); // Fetch users on the server

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

Code Breakdown

Imports: We import React to create the component. User Interface: We define a TypeScript interface User that specifies the structure of user objects, including id, name, and email. Data Fetching Function: The fetchUsers function makes a GET request to a public API (jsonplaceholder.typicode.com) to retrieve user data. It converts the response to JSON and returns an array of users. SSR Page Component: The UsersPage function is defined as an async function, which indicates to Next.js that we want to utilize SSR. Inside this function, we call fetchUsers to retrieve user data before rendering the component. The component returns an HTML structure that includes a heading and an unordered list of users.

How It Works

When a user navigates to /users, Next.js executes the UsersPage function on the server. The server fetches the user data, generates the complete HTML for the page, and sends it to the client. This results in a faster initial load and an improved user experience.