https://github.com/ascorbic/next-ppr-demo
https://github.com/ascorbic/next-ppr-demo
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ascorbic/next-ppr-demo
- Owner: ascorbic
- Created: 2024-04-19T14:06:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-22T12:03:40.000Z (almost 2 years ago)
- Last Synced: 2025-02-12T22:35:53.095Z (12 months ago)
- Language: TypeScript
- Homepage: https://next-ppr-demo.vercel.app
- Size: 909 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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/partial-prerendering).
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 `` to wrap Dynamic content.