Partial Prerendering (PPR)
App Router
Dynamic
Suspense
PPR
Here's a demo that matches the navigation speed of the Pages Router without caching. With PPR enabled, the static parts of the page are pre-rendered, allowing Next.js to prefetch and instantly display the static content.
App Router
This demo uses the App Router. Which is a newer way of developing apps with Next.js. It supports nested layouts, provides built-in solutions for loading states, error handling and data fetching. It defaults to server components and makes it easy to stream additional data from the initial page request.
Dynamic
The page includes dynamic content fetched through an API, which takes about one second to load. With the Pages Router, data fetching logic needs to be handled client-side. For the App Router, data can be fetched directly within the server component, simplifying the code a bit.
Suspense
The dynamic content is wrapped in a
Suspense component, which shows a loading spinner while data is fetched. The page doesn't make an extra request to get the dynamic content—the content is streamed from the initial page request itself.1export default function Page(props: { params: Promise<{ id: string }> }) {
2 return (
3 <div>
4 Static Title
5 <Suspense fallback={<Spinner />}>
6 <DynamicComponent {...props} />
7 </Suspense>
8 </div>
9 );
10}PPR
This demo has partial prerendering enabled. Partial Prerendering allows Next.js to combine static and dynamic content in a single page, serving a static shell instantly while streaming in dynamic content asynchronously.
1const nextConfig: NextConfig = {
2 experimental: {
3 ppr: true,
4 },
5};