16 Cache Components force to utilize CPU

[ni-justin]

Summary

So before I migrate to Nextjs 16 with cacheComponents: true, my nextjs 15 with dynamic = force-static routes are build and worked as a static that means no CPU usage in vercel dashboard. But after I upgraded to 16 with cacheComponents: true, those routes are kept using CPU through Vercel dashboard even though I added "use cache" for both page.tsx and layout.tsx of those routes and build said those routes are static. I am looking for how I can make the routes to SSG or pure CSR without CPU usage with cache components.

Additional information

No response

Example

No response

[icyJoseph]

You may not need use cache. The Partial Prerendering feature of Cache Components, can figure out the static bits of your app automatically, and construct the static shell.

Why did you put dynamic = 'force-static'? Was it because of a nested fetch or other kind of dynamic behavior from before Cache Components?

If your page is nothing but JSX, aka content that won't ever change, you might not need use cache.

I'd like to know a bit more though.

[ni-justin]

I should explain more of this. So this app includes multiple routs that works for AI chat app (like ChatGPT) and some others includes table, some grids of cards that show pop up with detail information. Something like this.

route structure:

• /(home): main page that has input field box for asking questions to AI
• /chat: Responded answer from the main page with streaming using AI-SDK
• /routeA: This route allows to upload some items, listed on table view of those items
• /routeB: This page allows user can create something, shows what they created in grid of cards

The limitation of this structure is that first CPU should not be used for /(home) and /chat route. If we think about Chat GPT, the /(home) route doesn't have any dynamic data without sidebar. It can be created in SSG way.

The /chat route needs to be CSR because if that use CPU with any server rendering, it will charge a lot for us because it supports background streaming. If user asked multiple questions from the home page with each single session, the /chat route will keep running until the last streaming is done. For example, if user asked 5 questions with each one in different sessions, the /chat route is keep running until the last 5th streaming ends. The reason I put force-static on here was last time, if I don't add this and just put use client, somehow CPU was kept used when I looked Vercel dashboard. It anyway works like CSR, I thought it not hurts my intention.

The reason I don't want to give up for Cache Components is because of /routeA and /routeB. They can be use some sort of PPR way for better performance since it has some mixing of static shells and dynamic contents.

So is there anyway current CacheComponents: true fullfills my requirement that I can only run pure CSR or SSG without any CPU usage on the server for specific route and other routes are running like usual?

[icyJoseph]

The reason I put force-static on here was last time, if I don't add this and just put use client, somehow CPU was kept used when I looked Vercel dashboard. It anyway works like CSR, I thought it not hurts my intention.

This is the only issue I have a hard to time following here, may be Friday brain but do you mind sketching it as pseudocode?

So in your app in the home page I type in some prompt, and I get moved to the chat page, where I can keep on chatting. Then in another tab, I can do the same and so on...

But there's no history or saved state of each chat? How are you getting the model messages? Using ai-sdk or something like that?

In principle, use client is not just about CSR. Client components might be part of the SSR pass. Moreover, PPR shouldn't have any issue figuring out that the chat page is static as far as it is concerned.

[ni-justin]

So like chatgpt the sidebar that shows history lists is running in root layout.tsx. There is also a ChatSessionProvider live in the root layout.tsx that manages all chat sessions and persists across page navigation between home and chat route, and render the streaming ui for chat route. I can't reveal ChatSessionProvider, but you can assume this provider is in charge of rendering all chatting related UIs with managing states across navigation with AI-SDK inside of /chat route. Like you said that use client is not just CSR, but I want true CSR for /chat route, so that is why I put force-static to prevent that route is keep using CPU in server when streaming is happened.

Now go back to my original question, if I use CacheComponents: true, then I can't do that export const dynamic = 'force-static';. But seems CacheComponents: true forces to render every route in server by default. If you look the difference my next.js 15 vs 16 with cache components, the only difference is I removed export const dynamic = 'force-static';. I expected that if the route's any component is not wrapped with Suspense, they should be treated as static shell, so it should not use any server CPU. But somehow, the /(home) route and /chat route was keep using CPU when I check the Vercel dashboard when I upgraded for Next 16 with cache components.

This is version 15 vs 16 cache components code. I also put "use cache" on top of root layout.tsx, but still cache components true makes these routes using CPU in server that was not happened in next 15. Again, the reason I want to keep CacheComponents: true is for using PPR to other routes like /routeA and /routeB that doesn't have long time rendering such as streaming that chat route is doing that I can optimize UX with easily separating static shell while streaming for dynamic contents. But curious how I can run pure CSR or SSG with current Next.js 16 cache components setup. At least when I was in Next.js 15, I could either do SSG for /(home) and pure CSR for /chat route, but not exact same setup for 16's cache components true setup.

#####################
Next.js 15:

/(home)/page.tsx

export const dynamic = 'force-static';

export default function Page(): React.ReactElement {
return (

)
}

/chat/layout.tsx

export default function ChatPage(): React.ReactElement {
return <>{children}</>;
}

/chat/page.tsx

import type React from 'react';
import { HomePage } from '@/_pages/home';

export const dynamic = 'force-static';

export default function Page(): React.ReactElement {
return <></>;
}

#####################
Next.js 16 with CacheComponents: true

/(home)/page.tsx

'use cache';

export default function Page(): React.ReactElement {
return (

)
}

/chat/layout.tsx

'use cache';

export default async function ChatLayout({
children,
}: {
children: React.ReactNode;
}): Promise<React.ReactElement> {
return <>{children}</>;
}

/chat/page.tsx

'use cache';

export default async function ChatPage(): Promise<React.ReactElement> {
return <></>;
}

[ni-justin]

Based on below magictalent's answer, seems there is no way currently cache components enabled environment allowed any routes not using any CPU. Can I ask this for feature request? Or would Vercel team has any plan on this solution? I am asking this to you since you are the maintainer.

#85882 (comment)

[magictalent]

In Next.js 16, when cacheComponents: true is enabled, the framework caches the React component tree (layouts, pages, and server components) between requests — but it still runs the component initialization logic on the server once per cache entry.

That means even if your route is marked as static during build (e.g. "use cache" + dynamic = "force-static"), Next.js will still load and evaluate the cached component tree on the server when it’s first requested or when the cache is invalidated.
This can show up as CPU usage on Vercel, especially right after deployment or cache misses.

Why you’re seeing CPU usage now (but not before):

1. In Next.js 15, force-static fully pre-rendered pages as HTML at build time (pure SSG).

2. In Next.js 16, with cacheComponents: true, Next.js caches at the React component level, not just the HTML output — meaning it may hydrate or re-evaluate the component tree in the serverless context.

3. So even "static" pages may still trigger server execution for cache hydration.

[magictalent]

I was wondering whether it would make sense to support a mode where fully static routes (e.g., dynamic = "force-static" + "use cache") could be served purely from the CDN layer with zero server CPU usage — similar to prebuilt SSG output in older versions.

Would it make sense to open this as a feature request for the Next.js team, or is there already something planned in that direction on Vercel’s side?

Totally understand if this behavior is intentional due to the new caching model — just curious if there’s a roadmap item or design consideration for this case.