📍TL;DR:

Next.js 16 ships Partial Prerendering (PPR) as a core feature. Instead of choosing between static or dynamic pages, you now get both on the same page. Static parts load instantly from CDN, dynamic parts stream in when ready. Enable it with cacheComponents: true in your config.

You might know that for quite a long time, there have been 2 types of pages on the Web:

• Static
• Dynamic

Both have their advantages and disadvantages.

Serving static content is unfairly faster. The page is generated at build time and can be put into a CDN, available almost immediately. The downside? Static pages can't use dynamic data (no API requests to fetch and display fresh content).

That's where dynamic pages come in. They solve this problem by allowing API calls, but the tradeoff is they can't be generated at build time because the fetched data would be stale by the time a user requests it. So rendering happens at request-time, which takes longer.

The next step was allowing some pages to be static and some dynamic. That's a common approach. Your landing, login, or support pages can be static, while settings, checkout, and profile pages stay dynamic. Most modern sites use this approach.

Here Comes Next.js

Next.js saw this problem and proposed a solution:

<aside> 💡

What if a single page could have both static and dynamic parts? Static parts get pre-built before request-time, delivered immediately, while dynamic parts "stream" in when ready. Makes a lot of sense.

</aside>

How Does Next.js Solve It?

PPR existed before Next 16 via an experimental flag, but now it can be enabled like this:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

Once you do this, congratulations, PPR is enabled 🥳.