Introduction

Modern web applications need to deliver content quickly while still providing dynamic, personalized experiences. Traditional rendering approaches often require developers to choose between static pages for speed or server-rendered pages for dynamic content.

Next.js 16 introduces Partial Prerendering (PPR), a rendering approach that combines the advantages of both. With Partial Prerendering, the static parts of a page are served immediately, while dynamic sections are rendered separately as they become available. This helps improve page load performance without sacrificing dynamic functionality.

In this article, you'll learn what Partial Prerendering is, how it works, and how to use it effectively in your Next.js applications.

What Is Partial Prerendering?

Partial Prerendering (PPR) allows a page to contain both static and dynamic content.

Instead of waiting for the entire page to be generated, Next.js sends the static content immediately. Dynamic sections are streamed to the browser once their data is ready.

For example, an e-commerce homepage might contain:

The navigation, banner, and categories can be prerendered, while recommendations and the shopping cart load dynamically.

This gives users something to interact with almost immediately.

Why Use Partial Prerendering?

Traditional rendering strategies each have advantages and limitations.

Rendering MethodAdvantagesLimitations
Static RenderingVery fastCannot show dynamic content
Server-Side RenderingAlways fresh dataSlower initial response
Client-Side RenderingInteractiveSlower initial load
Partial PrerenderingFast static content with dynamic updatesRequires thoughtful page design

Partial Prerendering helps balance performance and flexibility.

How Partial Prerendering Works

A typical request follows these steps:

  1. A user requests a page.

  2. Next.js sends the prerendered static HTML.

  3. The browser displays the available content immediately.

  4. Dynamic components fetch their data.

  5. The remaining parts of the page are streamed to the browser.

  6. The page becomes fully interactive.

This reduces the time users wait before seeing useful content.

Creating a Static Page

A simple page can be prerendered as usual.

export default function HomePage() {
    return (
        <main>
            <h1>Online Store</h1>
            <p>Browse our latest products.</p>
        </main>
    );
}

This content can be delivered immediately because it does not depend on user-specific data.

Loading Dynamic Content

Dynamic sections can be separated into their own components.

async function RecommendedProducts() {
    const products = await getRecommendedProducts();

    return (
        <ul>
            {products.map(product => (
                <li key={product.id}>
                    {product.name}
                </li>
            ))}
        </ul>
    );
}

Since this data depends on runtime information, it can be streamed after the static page has already been displayed.

Using Suspense for Streaming

React's Suspense works well with Partial Prerendering by displaying fallback content while dynamic components load.

import { Suspense } from "react";

export default function HomePage() {
    return (
        <main>
            <h1>Online Store</h1>

            <Suspense fallback={<p>Loading recommendations...</p>}>
                <RecommendedProducts />
            </Suspense>
        </main>
    );
}

Users immediately see the page instead of waiting for every request to complete.

Real-World Example

Imagine an online shopping website.

The following parts rarely change:

These sections can be prerendered.

The following sections are dynamic:

These components can be streamed after the initial page loads.

The result is a faster and more responsive shopping experience.

Benefits of Partial Prerendering

Using Partial Prerendering provides several advantages:

These benefits are particularly valuable for content-heavy and e-commerce applications.

Performance Considerations

Although Partial Prerendering improves performance, careful planning is still important.

Consider the following:

Regular performance testing helps ensure the rendering strategy continues to meet user expectations.

Best Practices

When using Partial Prerendering in Next.js applications, follow these recommendations:

Conclusion

Partial Prerendering introduces a practical way to combine the speed of static rendering with the flexibility of dynamic content. Instead of forcing developers to choose between performance and personalization, it allows both approaches to work together on the same page.

By carefully separating static and dynamic content, using Suspense for streaming, and following good performance practices, you can build Next.js applications that load faster, improve user engagement, and scale more effectively. Whether you're creating an e-commerce platform, a dashboard, or a content-rich website, Partial Prerendering can help deliver a smoother and more responsive user experience.