{"id":577,"date":"2026-08-15T05:01:19","date_gmt":"2026-08-15T05:01:19","guid":{"rendered":"https:\/\/abrarqasim.com\/blog\/partial-prerendering-cache-components-the-default-that-flipped\/"},"modified":"2026-08-15T05:01:19","modified_gmt":"2026-08-15T05:01:19","slug":"partial-prerendering-cache-components-the-default-that-flipped","status":"publish","type":"post","link":"https:\/\/abrarqasim.com\/blog\/partial-prerendering-cache-components-the-default-that-flipped\/","title":{"rendered":"Partial Prerendering Isn’t a Flag Anymore in Next.js 16"},"content":{"rendered":"

Short version for the impatient: partial prerendering isn’t an experimental flag any more, it’s the default behaviour of the App Router once you turn on cacheComponents<\/code>, and the mental model flipped from “mark the dynamic bits” to “mark the cached bits.” If you learned PPR in the Next 15 era like I did, you have to unlearn a chunk of it.<\/p>\n

I found this out the annoying way. Upgraded a client project, deleted experimental.ppr<\/code> because the build told me to, and then spent an afternoon wondering why a dashboard that used to render instantly was now waiting on a database call before it sent a single byte.<\/p>\n

The flag didn’t move. The default inverted.<\/p>\n

What actually changed between Next 15 and Next 16<\/h2>\n

In Next 15, partial prerendering was opt-in twice over. You set the flag globally and then marked individual routes:<\/p>\n

\/\/ next.config.js  (Next 15)\nmodule.exports = {\n  experimental: { ppr: 'incremental' },\n}\n<\/code><\/pre>\n
\/\/ app\/dashboard\/page.jsx  (Next 15)\nexport const experimental_ppr = true\n<\/code><\/pre>\n
Both of those are gone. In Next 16 you get one switch:<\/p>\n
\/\/ next.config.ts\nimport type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  cacheComponents: true,\n}\n\nexport default nextConfig\n<\/code><\/pre>\n
The cacheComponents docs<\/a> put it plainly: data fetching is dynamic by default, and you choose what to cache at the page, component, or function level. That single sentence is the whole migration. Under the old model, a page was static until you did something dynamic in it. Under the new one, a page is dynamic until you say use cache<\/code>.<\/p>\n
That’s why my dashboard got slower. It had never had an explicit cache directive anywhere, because it never needed one. The old defaults were doing the work invisibly.<\/p>\n
The static shell is the thing worth understanding<\/h2>\n
Strip away the config and the idea is simple. Next prerenders an HTML shell it can serve immediately, then streams the dynamic parts in as they resolve. One route, two rendering modes, no route-level either\/or.<\/p>\n
The practical consequence: your Suspense boundaries stopped being a loading-spinner nicety and became the seam where the shell ends and the stream begins. Everything outside a boundary has to be resolvable at build time or the shell can’t be produced.<\/p>\n
\/\/ app\/dashboard\/page.jsx\nimport { Suspense } from 'react'\n\nasync function Nav() {\n  'use cache'\n  const links = await getNavLinks()\n  return <nav>{\/* ... *\/}<\/nav>\n}\n\nasync function Revenue() {\n  const rows = await db.revenue.forUser(await getUserId())\n  return <Chart data={rows} \/>\n}\n\nexport default function Page() {\n  return (\n    <>\n      <Nav \/>\n      <Suspense fallback={<ChartSkeleton \/>}>\n        <Revenue \/>\n      <\/Suspense>\n    <\/>\n  )\n}\n<\/code><\/pre>\n
Nav<\/code> goes in the shell. Revenue<\/code> streams. I’d been treating Suspense as a UX decision for years, and it turned out I’d been making a caching decision the whole time without knowing it. I wrote a whole post on the loading states I stopped writing<\/a> back when I thought this was purely a rendering concern. It isn’t.<\/p>\n
use cache is per-function, and that’s the actual upgrade<\/h2>\n
Here’s the part I like. use cache<\/code> isn’t a route setting. You can put it on a page, a component, or a plain async function:<\/p>\n
async function getPricingTiers() {\n  'use cache'\n  const res = await fetch('https:\/\/api.example.com\/tiers')\n  return res.json()\n}\n<\/code><\/pre>\n
Anything that calls getPricingTiers()<\/code> gets the cached result, wherever it lives. Combine it with cacheLife<\/code> for duration and cacheTag<\/code> for targeted invalidation, and you can cache one expensive query while leaving the rest of the page fully dynamic.<\/p>\n
The old model gave you route segment config, which meant the least cacheable thing on a page determined the behaviour of everything on it. I had routes where a single user-specific badge in the header dragged an otherwise static marketing page into full dynamic rendering. That specific frustration is what this release fixes.<\/p>\n
The migration gotcha nobody warned me about<\/h2>\n
Cache Components requires the Node.js runtime. If you have export const runtime = 'edge'<\/code> anywhere, it has to go. The migration guide<\/a> covers it, and I’d read that guide, and I still missed it because the export was sitting in a middleware-adjacent route I hadn’t touched in a year.<\/p>\n
The second one is stranger and I’m still adjusting. With cacheComponents<\/code> on, Next uses React’s Activity component<\/a> to keep recently visited routes mounted in a hidden state instead of unmounting them. Navigate away, navigate back, your form inputs and expanded sections are still there.<\/p>\n
Mostly that’s lovely. It also means a dropdown that assumed it would be destroyed on navigation now isn’t. I had a modal that closed itself on unmount. It stopped closing itself. Took me twenty minutes to work out that nothing was broken, the component just wasn’t dying any more.<\/p>\n
Effects are cleaned up when a route is hidden and recreated when it comes back, so subscriptions behave. It’s the render-once-on-mount assumptions that break.<\/p>\n
Should you turn it on?<\/h2>\n
If you’re on Next 16 and your app has pages that mix genuinely static chrome with per-user data, yes, and the win is real. Time to first byte on that dashboard went from waiting-on-Postgres to immediate once I’d marked the shell properly.<\/p>\n
If your app is basically all dynamic, an admin panel behind auth where nothing is cacheable, you’ll do the migration work and get very little back. I’d skip it and revisit later.<\/p>\n
And if you’re mid-migration from Pages Router, do that first. Doing both at once means every problem has two possible causes, which is a bad way to spend a week. I’ve made that mistake on someone else’s dime and I’d rather not do it again.<\/p>\n
What to do this week<\/h2>\n
Turn on cacheComponents<\/code> in a branch, build, and read the errors. Next is fairly good at telling you which component broke the prerender and why, and the error list is a free audit of where your implicit caching assumptions were living.<\/p>\n
Then pick one route and get its shell right before you touch anything else. Trying to fix twelve routes simultaneously is how you end up reverting the whole thing.<\/p>\n
I do a fair amount of this kind of framework-upgrade archaeology on client projects, and it’s usually the invisible defaults that cost the time, not the documented breaking changes. More of that sort of work is on my portfolio<\/a>, if you’re curious what it looks like at scale.<\/p>\n","protected":false},"excerpt":{"rendered":"
Partial prerendering is now the App Router default via cacheComponents. Why my dashboard got slower after the upgrade, and the mental model that had to flip.<\/p>\n","protected":false},"author":2,"featured_media":576,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"Partial prerendering is now the App Router default via cacheComponents. Why my dashboard got slower after the upgrade, and the mental model that had to flip.","rank_math_focus_keyword":"cache components nextjs","rank_math_canonical_url":"","rank_math_robots":"","footnotes":""},"categories":[354],"tags":[353,61,634,41],"class_list":["post-577","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","tag-caching","tag-nextjs","tag-partial-prerendering","tag-react"],"_links":{"self":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/comments?post=577"}],"version-history":[{"count":0,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/577\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media\/576"}],"wp:attachment":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media?parent=577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/categories?post=577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/tags?post=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}