Skip to content

Partial Prerendering

Demo of Partial Prerendering in Next.js.

Framework
Use Case
Publisher ▲ Vercel
PPR Thumb

Next.js Partial Prerendering

This is a demo of Next.js using Partial Prerendering.

This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.

It also uses the experimental Partial Prerendering feature available in Next.js 14. Partial Prerendering combines ultra-quick static edge delivery with fully dynamic capabilities and we believe it has the potential to become the default rendering model for web applications, bringing together the best of static site generation and dynamic delivery.

⚠️ Please note that PPR is an experimental technology that is not recommended for production. You may run into some DX issues, especially on larger code bases, and known issues around performance of client-side navigations have not yet been addressed.

How it works

The index route / uses Partial Prerendering through:

  1. Enabling the experimental flag in next.config.js.
experimental: {
    ppr: true,
},
  1. Using <Suspense /> to wrap Dynamic content.
PPR Thumb

Partial Prerendering

Demo of Partial Prerendering in Next.js.

Framework
Use Case
Publisher ▲ Vercel

Next.js Partial Prerendering

This is a demo of Next.js using Partial Prerendering.

This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.

It also uses the experimental Partial Prerendering feature available in Next.js 14. Partial Prerendering combines ultra-quick static edge delivery with fully dynamic capabilities and we believe it has the potential to become the default rendering model for web applications, bringing together the best of static site generation and dynamic delivery.

⚠️ Please note that PPR is an experimental technology that is not recommended for production. You may run into some DX issues, especially on larger code bases, and known issues around performance of client-side navigations have not yet been addressed.

How it works

The index route / uses Partial Prerendering through:

  1. Enabling the experimental flag in next.config.js.
experimental: {
    ppr: true,
},
  1. Using <Suspense /> to wrap Dynamic content.

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential