Next.js Static Site Generation: How to Optimize Your Web App

Next.js has emerged as a popular framework for building React applications. One of its standout features is static site generation (SSG), a method that pre-renders pages at build time, offering faster load times and improved SEO.

In this blog, we will delve into the intricacies of Next.js static site generation, exploring its benefits, implementation, and advanced techniques like incremental static regeneration (ISR).

What is Static Site Generation in Next.js?

Static site generation (SSG) is a method of pre-rendering your website's pages at build time, converting them into static HTML files. This means that your pages are generated once, during the build process, and then served as static files. In Next.js, static site generation allows you to create static pages that are highly performant and SEO-friendly.

In a typical Next.js project, you use the function export async function getStaticProps to fetch data at build time. This data is then used to generate static pages. Here's an example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to My Next.js Static Site</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Difference Between Static Site Generation, Server-Side Rendering, and Client-Side Rendering

• Static Site Generation (SSG): Pages are pre-rendered as static HTML files at build time. This leads to faster page loads and better SEO since the content is already available when a user's request hits the web server.

• Server-Side Rendering (SSR): Pages are rendered on the server at each user's request. This means that every time a user visits a page, the server generates the HTML dynamically.

• Client-Side Rendering (CSR): Pages are rendered in the browser using JavaScript. The initial HTML file is usually minimal, and JavaScript loads the rest of the content dynamically.

In Next.js, you can choose the best rendering method based on your needs. For example, use SSG for blog posts or marketing pages where the content doesn't change frequently. Use SSR for pages that require up-to-date data on every request, like a live feed.

Advantages of Static Site Generation

Static site generation in Next.js offers several advantages:

1. Performance: Since static files are served directly by the web server without additional processing, your pages load faster. This leads to a better user experience and can improve your search engine rankings.

2. Scalability: Serving static files is easier to scale because it doesn't involve server-side processing for each request. You can leverage CDNs to distribute your static files globally, further enhancing load times.

3. Security: Static files are less prone to security vulnerabilities compared to server-side rendered pages because there is no server-side code execution on each request.

4. SEO Benefits: Static pages are pre-rendered, making it easier for search engines to index your content. This can lead to better visibility and higher rankings in search engine results.

5. Reduced Server Load: Since static pages are pre-generated, your server doesn't need to handle complex computations or database queries for each request, reducing the overall load on your server.

How Static Site Generation Works in Next.js

In Next.js, the build process is crucial for static site generation. When you run the build command (next build), Next.js performs several tasks to prepare your static site. The build process involves:

1. Compiling: Next.js compiles your React components and JavaScript code.

2. Bundling: It bundles your code and its dependencies into optimized static files.

3. Generating Pages: For each page defined in your pages directory, Next.js generates an HTML file and associated JavaScript.

This process results in a collection of static files, including pre-rendered HTML files, that can be served directly by a web server. These static files are placed in the out directory, which you can deploy to a hosting provider or CDN.

How Next.js Handles Static Generation

Next.js handles static generation using two key functions: getStaticProps and getStaticPaths. These functions allow you to fetch data at build time and generate static pages based on that data.

The getStaticProps and getStaticPaths functions are essential for static site generation in Next.js. They enable you to fetch data at build time and generate static pages based on that data. By using these functions, you can ensure that your pages are statically generated, leading to faster page loads and better SEO.

• getStaticProps: Fetches data at build time and passes it as props to the page component.

• getStaticPaths: Defines dynamic routes and pre-renders paths at build time.

Implementing Static Site Generation in Next.js

To get started with static site generation in Next.js, you first need to set up a new Next.js project. Follow these steps:

1. Install Next.js: Run the following command to create a new Next.js app:

Copy
1
2
npx create-next-app my-static-site
cd my-static-site

2. Start the Development Server: Once the setup is complete, navigate to your project directory and start the development server:

Copy
1
npm run dev

This command will start the development server at http://localhost:3000.

Creating Pages and Using getStaticProps

Next, let's create some pages and use getStaticProps to implement static site generation. We'll start with a simple homepage that fetches data at build time.

1. Create a Home Page: Create a new file named index.js in the pages directory:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to My Next.js Static Site</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

In this example, getStaticProps fetches data from an API endpoint at build time and passes it to the HomePage component as props. The data is then used to render the static page.

2. Create a Dynamic Route: To demonstrate dynamic routing with static site generation, create a new file named [id].js in the pages/posts directory:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

In this example, getStaticPaths fetches a list of posts and generates paths for each post based on its ID. The getStaticProps function fetches the data for each individual post and passes it to the PostPage component.

Incremental Static Regeneration

Incremental Static Regeneration (ISR) is a powerful feature in Next.js that combines the benefits of static site generation with the flexibility of server-side rendering. ISR allows you to update static pages after they have been built, without needing to rebuild the entire site. This means you can serve static pages that are as up-to-date as possible while maintaining the performance benefits of static generation.

ISR works by regenerating static pages on the fly when a user's request is received, based on a revalidation interval that you define. This interval determines how often the static pages are re-generated, ensuring that your content remains fresh.

How ISR Differs from Traditional Static Generation

Traditional static site generation involves building all static pages at build time. This approach is highly performant and efficient for content that doesn't change frequently. However, it requires a full rebuild of the site whenever content updates are needed, which can be time-consuming and resource-intensive.

ISR, on the other hand, allows you to specify a revalidation interval for each static page. Instead of rebuilding the entire site, ISR re-generates only the pages that need to be updated based on the specified interval. This approach provides several advantages:

1. Up-to-Date Content: Ensures that your static pages stay up to date with minimal delay.

2. Improved Performance: Maintains the performance benefits of static site generation by serving pre-rendered pages.

3. Scalability: Reduces the need for frequent full-site rebuilds, making it easier to scale your site.

Implementing ISR in a Next.js Project

Implementing ISR in a Next.js project is straightforward. You use the revalidate property in the getStaticProps function to specify the revalidation interval. Here's an example:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 10, // Re-generate the page at most once every 10 seconds
  };
}

export default function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

In this example:

• getStaticPaths: Fetches a list of posts and generates paths for each post based on its ID. The fallback: 'blocking' setting ensures that new pages are generated on-demand if they haven't been pre-generated.

• getStaticProps: Fetches data for each post and passes it to the PostPage component. The revalidate property is set to 10 seconds, meaning the page will be regenerated at most once every 10 seconds.

Benefits of Using ISR

1. Optimized Performance: By combining static generation and on-demand updates, ISR ensures that your site remains fast and responsive.

2. Flexibility: Allows you to specify different revalidation intervals for different pages based on how frequently the content changes.

3. Scalability: Reduces the need for full-site rebuilds, making it easier to manage large sites with frequently updated content.

Dynamic Routing with Static Site Generation

In Next.js, dynamic routing allows you to create pages that are generated based on dynamic data. This is particularly useful for sites with content that is structured in a hierarchical way, such as blogs, e-commerce sites, and portfolios. By combining dynamic routing with static site generation, you can pre-render pages that depend on dynamic data at build time, ensuring faster page loads and better SEO.

Using getStaticPaths to Generate Dynamic Pages

To handle dynamic routes with static site generation in Next.js, you use the getStaticPaths function. This function is used to specify which dynamic routes should be pre-rendered at build time. It works in tandem with the getStaticProps function to fetch the necessary data for each dynamic route.

Here's a step-by-step process:

1. Define the Dynamic Route: Create a new file with a dynamic segment in the pages directory. For example, pages/posts/[id].js where [id] is the dynamic part of the URL.

2. Implement getStaticPaths: In the file, export an async function called getStaticPaths. This function fetches the list of dynamic paths and returns them.

3. Implement getStaticProps: Fetch the data for each dynamic route and pass it as props to the page component.

Let's look at a complete example to see how dynamic routing with static site generation is implemented.

1. Define the Dynamic Route: Create a file named [id].js inside the pages/posts directory.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// pages/posts/[id].js
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

In this example:

• getStaticPaths: This function fetches a list of posts from an API endpoint and generates paths for each post based on its ID. The paths are then returned in the paths array. The fallback: false option means that any paths not returned by getStaticPaths will result in a 404 page.

• getStaticProps: This function fetches the data for each post based on the id parameter. The fetched data is passed to the PostPage component as props.

• PostPage Component: This React component receives the post data as props and renders the post title and content.

Example with Fallback

If you have a large number of dynamic pages or frequently changing content, you might want to use the fallback option in getStaticPaths to handle paths that weren't generated at build time. Here’s how you can modify the previous example to use fallback: true:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// pages/posts/[id].js
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    fallback: true,
  };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 10, // Re-generate the page at most once every 10 seconds
  };
}

export default function PostPage({ post }) {
  const router = useRouter();

  // Show a loading state until the page is generated
  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

In this updated example:

• fallback: true: This setting allows Next.js to serve a fallback page until the content is generated. If a user navigates to a path that hasn't been pre-rendered, Next.js will serve a loading state while it fetches the data and generates the page.

• router.isFallback: This property from the useRouter hook is used to check if the page is in a fallback state. If it is, you can display a loading message or spinner until the page is generated.

Fetching Data for Static Site Generation

In Next.js, you can fetch data for static site generation using various methods. The most common approaches include:

1. Fetching from External APIs: This is a straightforward method where you fetch data from third-party APIs.

2. Fetching from Local Files: You can read data from local files such as JSON files.

3. Fetching from Databases: You can connect to a database and fetch data directly.

4. Using GraphQL: You can fetch data from a GraphQL API.

5. Combining Multiple Data Sources: Fetch data from multiple sources and combine them as needed.

Fetching Data from External APIs

Fetching data from external APIs is a common use case in Next.js. Here’s how you can do it:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// pages/posts.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

In this example:

• getStaticProps fetches data from an external API endpoint and passes it to the PostsPage component.

Fetching Data from Local Files

You can also fetch data from local files, which is useful for data that doesn’t change often.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// pages/data.js
import fs from 'fs';
import path from 'path';

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), 'data.json');
  const jsonData = fs.readFileSync(filePath, 'utf8');
  const data = JSON.parse(jsonData);

  return {
    props: {
      data,
    },
  };
}

export default function DataPage({ data }) {
  return (
    <div>
      <h1>Data from Local File</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

In this example:

• getStaticProps reads data from a local JSON file and passes it to the DataPage component.

Fetching Data from Databases

To fetch data from a database, you would typically use a database client or ORM (Object-Relational Mapping) tool. Here’s an example using a mock database function:

Copy
1
2
3
4
5
6
7
8
9
10
// lib/db.js
import { Client } from 'some-database-client';

export async function fetchPosts() {
  const client = new Client();
  await client.connect();
  const res = await client.query('SELECT * FROM posts');
  await client.end();
  return res.rows;
}

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// pages/db-posts.js
import { fetchPosts } from '../lib/db';

export async function getStaticProps() {
  const posts = await fetchPosts();

  return {
    props: {
      posts,
    },
  };
}

export default function DbPostsPage({ posts }) {
  return (
    <div>
      <h1>Posts from Database</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

In this example:

• fetchPosts is a mock function that simulates fetching data from a database.

• getStaticProps calls fetchPosts and passes the data to the DbPostsPage component.

Using GraphQL

Fetching data from a GraphQL API is another powerful method, especially if your backend supports GraphQL.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// lib/graphql.js
import { GraphQLClient, gql } from 'graphql-request';

export async function fetchGraphQLPosts() {
  const endpoint = 'https://api.example.com/graphql';
  const graphQLClient = new GraphQLClient(endpoint);
  const query = gql`
    {
      posts {
        id
        title
      }
    }
  `;
  const data = await graphQLClient.request(query);
  return data.posts;
}

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// pages/graphql-posts.js
import { fetchGraphQLPosts } from '../lib/graphql';

export async function getStaticProps() {
  const posts = await fetchGraphQLPosts();

  return {
    props: {
      posts,
    },
  };
}

export default function GraphQLPostsPage({ posts }) {
  return (
    <div>
      <h1>Posts from GraphQL</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

In this example:

• fetchGraphQLPosts fetches data from a GraphQL endpoint.

• getStaticProps calls fetchGraphQLPosts and passes the data to the GraphQLPostsPage component.

Here are some additional examples to illustrate how you can fetch data from different sources in Next.js:

Combining Multiple Data Sources:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// pages/multi-source.js
export async function getStaticProps() {
  const apiRes = await fetch('https://api.example.com/posts');
  const apiPosts = await apiRes.json();

  const filePath = path.join(process.cwd(), 'data.json');
  const fileData = JSON.parse(fs.readFileSync(filePath, 'utf8'));

  return {
    props: {
      apiPosts,
      fileData,
    },
  };
}

export default function MultiSourcePage({ apiPosts, fileData }) {
  return (
    <div>
      <h1>Combined Data</h1>
      <h2>API Posts</h2>
      <ul>
        {apiPosts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <h2>File Data</h2>
      <pre>{JSON.stringify(fileData, null, 2)}</pre>
    </div>
  );
}

In this example:

• getStaticProps fetches data from both an external API and a local file, then combines the data and passes it to the MultiSourcePage component.

Conclusion

Static Site Generation with Next.js offers a powerful blend of speed, scalability, and SEO benefits, making it an excellent choice for developers looking to optimize their web applications. By leveraging `getStaticProps` and `getStaticPaths`, you can pre-render pages with the data they need, directly at build time. With the addition of Incremental Static Regeneration, Next.js also provides a flexible solution for keeping content fresh without sacrificing performance.