Exploring Partial Prerendering in Next.js

Partial Prerendering (PPR) is an experimental feature introduced in Next.js 14, designed to optimize web applications by blending the strengths of static site generation with dynamic content delivery. This approach aims to deliver ultra-fast static edge content while maintaining the dynamic capabilities of server-side rendering.

What is Partial Prerendering?

Partial Prerendering generates a static shell of your route ahead of time and deploys it to every edge region. This static shell is then paired with dynamic data streamed from your server, ensuring users experience fast initial load times while interacting with dynamic content as it becomes available. This method leverages React's Suspense component, enabling out-of-order streaming and enhancing user experience by rendering parts of the UI progressively.

How Does It Work?

To use Partial Prerendering, you need to enable it in your next.config.js:

experimental: {
    ppr: true,
},

Once enabled, you can wrap dynamic content in Suspense components to allow for partial rendering. For example:

import { Suspense } from 'react'
 
export default function Page() {
  return (
    <section>
      <Suspense fallback={<Loading />}>
        <MainContent />
      </Suspense>
      <Suspense fallback={<Loading />}>
        <Sidebar />
      </Suspense>
    </section>
  )
}

Benefits of Partial Prerendering

1. Faster Initial Load Times: Serving a static shell from the edge ensures quick initial load times.
2. Dynamic Interactivity: Streamed dynamic data allows users to interact with the application while additional content loads.
3. Improved Performance: Streaming prevents slow data sources from blocking the initial render, beneficial for complex applications that rely on multiple data sources.

Use Cases

Partial Prerendering is especially useful for applications needing to balance speed and interactivity. For example, e-commerce sites can display product information immediately while streaming in user reviews or additional product details.

Future Prospects

While Partial Prerendering is still experimental and not recommended for production use in large-scale applications, it shows great promise for the future of web development. By combining static and dynamic rendering, it has the potential to become the default rendering model, providing a seamless and fast user experience.

For more detailed information, you can read the original articles on Vercel's blog (opens in a new tab).