How does Next.js treat static pages when Cache Components is enabled?

[vilebbit]

Summary

I'm trying to use the new Cache Components in my project, but ran into a question that I couldn't really understand.

Here let's say I have a super simple page like this:

export default function HomePage() {
  return (
    <div>
      <p>This is the home page</p>
    </div>
  )
}

As you can see, this is a static page, no runtime data or dynamic data fetching.

However, since the Cache Components documentation says:

With Cache Components enabled, Next.js treats all routes as dynamic by default.

That makes me think even if this is a static page, Next.js will still treat it a dynamic page if I don't add "use cache" to it, which is undesirable for performance. So I changed my page to this:

export default function HomePage() {
  "use cache"
  return (
    <div>
      <p>This is the home page</p>
    </div>
  )
}

But when I compile it, an error shows up saying:

"use cache" functions must be async functions.

Of course I can just follow the message to make my function async, but since there is actually no async operation in that function, I don't really think it's necessary. Besides, I'm not sure if there are any penalties if I make it async.

So my question is:

1. If I don't add "use cache" to my static page, will Next.js treat it a dynamic page?
2. If so, should I make my function async even if it doesn't actually use any async operations?

Additional information

No response

Example

No response

[icyJoseph]

Right, the thing here is that, you also need to remember that generating a static shell is part of the process.

In your case, your page is nothing but static content, there's no dynamic/runtime behavior to handle, no fallback UI needed. Cache Components implements PPR, so it can just output the entire HTML for this page. If you added use cache you'd be telling Next.js, to also revalidate this page, but for such a page that's not needed.

Also, since all pages generate a static shell, to be, potentially, filled in with dynamic/runtime content, you can totally inspect these in the build output, or better yet, see the React Dev Tools Suspense tab, which shows boxes where content with fallback exists and how it progresses over time.

use cache is more about making otherwise dynamic data, part of the static shell. Think of it as generating snapshots of pages, with fallback UI for certain content.

We are actively working in the wording and teaching story of Cache Components.

[vilebbit]

Thanks for the clarification. With your answer in mind, I think now I have a deeper understanding of this feature.

[ruchernchong]

This is a good response and is needed for me to understand the CPU spikes and ISR writes after using use cache for the simple page in the first post.