Incremental Static Regeneration & Partial Prerendering in Next.js

React, along with its powerful framework Next.js, has revolutionized web development by offering cutting-edge techniques for optimizing website performance and user experience. Combining the strengths of client-side and server-side rendering, Next.js introduces Incremental Static Regeneration (ISR) and Partial Prerendering.

This article will explore how these strategies leverage the advantages of static site generation while seamlessly integrating dynamic content. By understanding ISR and Partial Prerendering, you'll gain insights into achieving faster load times, improved SEO, and a smoother user experience for your web applications.

Incremental Static Regeneration (ISR)

ISR is a hybrid approach that combines the advantages of static site generation with the flexibility of dynamic content. in build process by default, static page is generated and displayed to the users, developer can revalidate the static page at a given time. Once this period elapses, the next request to the page triggers a regeneration of the page in the background. While the page is being regenerated, the old (stale) version of the page continues to be served to users.

After the completion of the regeneration, the previous version of the page is replaced with the new one for subsequent requests. This method combines the advantages of static generation, such as performance and reliability, with the ability to update content dynamically when necessary.

How it Works:

Pages are initially pre-rendered at build time, creating static HTML files.
After a specified time or on demand (e.g., when data changes), these pages are re-rendered in the background.
The updated HTML is cached, ensuring that subsequent requests receive the latest version.

Code Example:

Benefits:
- Improved Performance: Delivers fast initial load times due to pre-rendering and reduces server load.
- Excellent SEO: Search engines can easily crawl and index pre-rendered pages.
- Background Revalidation: Automatically updates cached pages, ensuring fresh content without impacting user experience or rebuilding the entire site
- Revalidation on Demand: Allows manual triggering of revalidation when data changes unexpectedly.
Use Cases:
- Pages with frequently updated content (e.g., blog posts, news articles, e-commerce site).
- Pages that require high performance and SEO.

Code Example:

import React from "react";

async function fetchPosts() {
  console.log("Fetching posts..."); // Log when fetching
  const request = await fetch("https://api.vercel.app/blog", {
    next: { revalidate: 60 }, // Nextjs will revalidate the request every 60 seconds
  });
  const data = await request.json();
  return data;
}

const Page = async () => {
  const data = await fetchPosts();

  return (
    <main>
      <h1>{data[0].title}</h1>
      <p>{data[0].content}</p>
    </main>
  );
};

export default Page;

Partial Prerendering

Partial Prerendering is a new feature introduced in Next.js 15. This allows you to combine static and dynamic rendering within a single page. While static contents are being displayed to the users, dynamic component keeps re-rendering by offering more granular control over the rendering process.

How it Works:
- Pre-renders parts of a page that can be statically generated.
- Dynamically renders the remaining parts of the page as needed.
Benefits:
- Flexibility: Enables a mix of static and dynamic content within a single page.
- Improved Performance: Delivers fast initial page loads for static parts.
- Enhanced User Experience: Provides a smoother user experience by dynamically rendering interactive elements.
- Leverages React Suspense: Utilizes React Suspense to manage the loading state of dynamically rendered parts.
Use Cases:
- Pages with a combination of static and dynamic elements (e.g., product pages with user reviews).
- Pages requiring interactive components or personalized content.

Before Next.js 15:

The primary prerendering methods of Prerendering were Static Generation (SSG) and Server-Side Rendering (SSR).
There was no dedicated configuration option for Partial Prerendering.

Static Generation (SSG)

How it works:
- Pages are generated at build time.
- HTML is created for each page during the build process.
- This HTML is then served directly to users on each request.
Key Considerations:
- Suitable for pages with static content that doesn't change frequently (e.g., about pages, contact pages).
- Data fetching happens during the build time using getStaticProps.
- Limitations:
  - Not suitable for pages with frequently changing data.
  - Requires re-deployment for updates.

Code Example:

// pages/blog/[slug].js
export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.slug}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

export default function Post({ post }) {
  // ... your component's JSX ...
}

Server-Side Rendering (SSR)

How it works:
- Pages are generated on every request to the server.
- The server renders the HTML for each request and sends it to the client.
Key Considerations:
- Suitable for pages that require dynamic data on every request (e.g., user profiles, e-commerce carts).
- Data fetching happens on every request using getServerSideProps.
- Higher server load compared to SSG.

Code Example:

// pages/profile/[username].js

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/users/${params.username}`);
  const user = await res.json();

  return {
    props: { user },
  };
}

export default function Profile({ user }) {
  // ... your component's JSX ...
}

Notes:

Data Fetching: Both SSG and SSR utilize data fetching methods (getStaticProps and getServerSideProps) to retrieve data and pass it to the page components.
Revalidation: In Next.js versions before 15, revalidating statically generated pages often involved re-deploying the entire application.

In Next.js 15 and later:

You can enable Partial Prerendering by setting the ppr option in next.config.js:

Enable Partial Prerendering in next.config.js

const nextConfig = {
  experimental: {
    ppr: 'incremental', 
  },
};

module.exports = nextConfig;

This configuration instructs Next.js to use the "incremental" mode for Partial Prerendering, where it attempts to pre-render as much of the page as possible during the build process.

Note:

The ppr option and Partial Prerendering itself are specific to Next.js 15 and later versions.
Attempting to use ppr in earlier versions will likely result in errors or unexpected behavior.

After Partial Prerendering has been enable in the next.config.js, then;

Identify Dynamic Components

Determine which parts of your page require dynamic data or interactions.
These components will be rendered dynamically after the initial page load.

Wrap Dynamic Components with Suspense

Suspense is a feature in React that allows you to handle asynchronous operations in a declarative way. It provides a simpler way to handle asynchronous data fetching, lazy loading of components, and other operations that take time to complete. Suspense lets you specify a fallback UI to display while waiting for a resource to load.

Code Example:

// app/page.tsx

import { Suspense } from 'react';

export const experimental_ppr = true; // Enable PPR for this page

function Page() {
  return (
    <main>
      <h1>Static Content</h1> 
      <Suspense fallback={<div>Loading user data...</div>}>
        <User /> 
      </Suspense>
    </main>
  );
}

export default Page;

The fallback prop of Suspense defines what to display while the dynamic component is loading. You can customize this to provide a better user experience (e.g., a loading spinner, skeleton loader).

Choosing Between ISR and Partial Prerendering

The best choice depends on the specific requirements of your application:

Frequency of data changes:
- For frequently updated content, ISR's automatic revalidation is often more suitable.
Complexity of dynamic content:
- For complex dynamic content, Partial Prerendering might provide better control and flexibility.
User experience requirements:
- If a smooth, interactive experience is crucial, Partial Prerendering can offer a better user experience.

Value in Optimizing Next.js Applications

Enhanced Performance: Both ISR and partial prerendering help in reducing Time to First Byte (TTFB) and improving Core Web Vitals.
Flexibility: They provide a flexible approach to balancing SEO benefits of static content with the need for fresh, dynamic content.
Scalability: These techniques help scale applications efficiently, reducing the need for frequent full rebuilds and redeployments.

Conclusion

Both ISR and Partial Prerendering are valuable techniques for optimizing Next.js applications. By carefully considering your project's needs and choosing the appropriate approach, you can significantly enhance website performance, improve user experience, and achieve better SEO results.

Incremental Static Regeneration & Partial Prerendering in Next.js: A Deep Dive

Table of contents

Incremental Static Regeneration (ISR)

Partial Prerendering

Choosing Between ISR and Partial Prerendering

Value in Optimizing Next.js Applications

Conclusion