---
title: "Partial Prerendering"
description: "Demo of Partial Prerendering in Next.js."
url: "https://vercel.com/templates/next.js/partial-prerendering-nextjs"
links:
  repository: "https://github.com/vercel-labs/next-partial-prerendering"
  demo: "https://partialprerendering.com/"
  deploy: "https://vercel.com/new/clone?demo-title=Partial+Prerendering&demo-description=Demo+of+Partial+Prerendering+in+Next.js.&demo-url=https%3A%2F%2Fpartialprerendering.com%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2cYtB1iEyWrznkHEOj54dg%2F661075407a47e9bf627dff50de1f3523%2FNew_Project__1_.png&project-name=Partial+Prerendering&repository-name=partial-prerendering-nextjs&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fnext-partial-prerendering&from=templates&skippable-integrations=1"
---

# Partial Prerendering

Demo of Partial Prerendering in Next.js.

## Next.js Partial Prerendering

This is a demo of [Next.js](https://nextjs.org) using [Partial Prerendering](https://nextjs.org/docs/app/api-reference/next-config-js/ppr).

This template uses the new Next.js [App Router](https://nextjs.org/docs/app). 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](https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model), 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.

## How it works

The index route `/` uses Partial Prerendering through:

1. Enabling the experimental flag in `next.config.js`.

```js
experimental: {
    ppr: true,
},
```

2. Using `<Suspense />` to wrap Dynamic content.

## Related Templates

### [Nextra: Docs Starter Kit](https://vercel.com/templates/next.js/documentation-starter-kit)

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.

### [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce)

Starter kit for high-performance commerce with Shopify.

### [Next.js App Router Playground](https://vercel.com/templates/next.js/app-directory)

Examples of many Next.js App Router features.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.