Next.js 16 Partial Prerendering Explained with Practical Examples

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:

Navigation menu
Hero banner
Product categories
Personalized recommendations
Shopping cart summary

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 Method	Advantages	Limitations
Static Rendering	Very fast	Cannot show dynamic content
Server-Side Rendering	Always fresh data	Slower initial response
Client-Side Rendering	Interactive	Slower initial load
Partial Prerendering	Fast static content with dynamic updates	Requires thoughtful page design

Partial Prerendering helps balance performance and flexibility.

How Partial Prerendering Works

A typical request follows these steps:

A user requests a page.
Next.js sends the prerendered static HTML.
The browser displays the available content immediately.
Dynamic components fetch their data.
The remaining parts of the page are streamed to the browser.
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:

Logo
Navigation
Footer
Product categories
Promotional banners

These sections can be prerendered.

The following sections are dynamic:

User profile
Shopping cart
Personalized offers
Recently viewed products
Order history

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:

Faster initial page load
Better user experience
Reduced perceived loading time
Improved Core Web Vitals
Better SEO through prerendered content
Dynamic content without delaying the entire page
Efficient use of server resources

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:

Keep the static portion of the page as large as practical.
Avoid unnecessary server requests.
Stream only components that truly require runtime data.
Use caching where appropriate.
Optimize database queries for dynamic sections.
Measure performance using real-world workloads.

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:

Identify which content is static and which is dynamic before building the page.
Use Suspense to provide meaningful loading states.
Keep dynamic components small and focused.
Cache data whenever possible to reduce server load.
Avoid unnecessary client-side rendering for content that can be prerendered.
Monitor Core Web Vitals to evaluate performance improvements.
Test pages under different network conditions to verify the user experience.
Keep Next.js and React dependencies updated to benefit from rendering and performance improvements.

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.