Understanding Static Site Generation (SSG) in Next.js

04 November 2024

Static Site Generation (SSG) is one of the key features of Next.js that allows developers to generate static HTML pages at build time. This means that when you build your application, Next.js pre-renders the pages, resulting in fast-loading sites that can be served directly from a Content Delivery Network (CDN). In this blog post, we will explore what SSG is, its benefits, and how to implement it in a simple Next.js application by fetching user data from an API.

What is Static Site Generation?

Static Site Generation is a method of building web pages that generates HTML files during the build process, rather than at runtime. These HTML files are then served to users, allowing for fast loading times and improved performance. SSG is particularly useful for content-driven sites, such as blogs or documentation, where the content doesn’t change frequently.

Benefits of SSG

Performance: Since the pages are pre-rendered, they load quickly, as there is no server processing required for each request. SEO Friendly: Search engines can easily crawl and index the pre-rendered HTML pages, improving your site's search engine optimization (SEO). Reduced Server Load: By serving static files, you can reduce the load on your server, making it easier to handle a large number of requests.

Implementing SSG in Next.js

Let’s create a new page that fetches user data using Static Site Generation. 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;
}

// UsersPage component with SSG
export default function UsersPage({ users }: { users: User[] }) {
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Next.js function to generate static props
export async function getStaticProps() {
  const users = await fetchUsers(); // Fetch users at build time

  return {
    props: {
      users, // Pass users as props to the component
    },
  };
}

Code Breakdown

Imports: We import React to create the component. User Interface: We define a TypeScript interface User to specify the structure of user objects, including id, name, and email. Data Fetching Function: The fetchUsers function uses the Fetch API to retrieve user data from a public API (jsonplaceholder.typicode.com). It returns an array of users. UsersPage Component: The UsersPage component receives the users data as props and renders it in an unordered list (

). Each user's name and email are displayed in list items. getStaticProps Function: This is a special Next.js function that allows you to fetch data at build time. When you export getStaticProps, Next.js will call this function during the build process to get the necessary data. Inside getStaticProps, we call fetchUsers to retrieve user data. The returned object must contain a props key, where we pass the fetched users data.

How It Works

When you run the Next.js build command (npm run build), Next.js executes the getStaticProps function, fetching the user data and generating a static HTML page with the fetched data. The resulting HTML files are served to users, providing fast load times.