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 <></>;
}