After using cacheComponent, how can I achieve dynamic content that previously used dynamic='force-static' and revalidate to return cache-control with s-maxage and swr? Currently, it can only return no-store.

[fairjm]

Summary

I recently upgraded a previous Next.js project from version 15 to 16, enabled cacheComponent, and replaced dynamic and revalidate according to the official documentation.

But I found their behavior inconsistent. My blog page previously used dynamic and revalidate, and it would correctly return s-max-age and swr.

export const revalidate = 300;
export const dynamic = "force-static";

Then I applied "use cache" for all layouts of this page, including the page itself, just as described in the documentation.
However, I found that it still returns "no-store". The only way to get it to include caching is to use generateStaticParams (but it only returns the provided parameters since this happens at build time). Previously, I didn’t use generateStaticParams and just used force-static to achieve this.

I want to know what the equivalent implementation is now?

Please note: after I build and then start with debug cache enabled, it does generate a cache. My issue is with the cache-control header in the HTTP response, because if it is set to no-store, the CDN in my production environment will not cache it.

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:33:46 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T8112
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 22.20.0
  npm: 10.9.3
  Yarn: N/A
  pnpm: 10.18.3
Relevant Packages:
  next: 16.0.1 // Latest available version is detected (16.0.1).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.8.2
Next.js Config:
  output: standalone

Example

No response

[icyJoseph]

Could you share your file tree? I think you might want to look into cacheLife('max') in the layout?

[fairjm]

It’s quite strange. After I built it, I found that they are only set to PPR and there is no revalidate or expire. It seems like the cache is not working at all (the default values should be at least 15 minutes and 1 year).

├ ƒ /api/revalidate-blogs
├ ○ /blog                                                    15m      1y
├ ◐ /blog/[language]                                         15m      1y
│ ├ /blog/[language]                                         15m      1y
│ ├ /blog/zh                                                 15m      1y
│ ├ /blog/ja                                                 15m      1y
│ └ /blog/en                                                 15m      1y
├ ◐ /blog/[language]/[page]                                  15m      1w
│ ├ /blog/[language]/[page]                                  15m      1w
│ ├ /blog/en/[page]
│ ├ /blog/en/1                                               15m      1w
│ └ [+4 more paths]
├ ◐ /blog/[language]/post/[slug]
│ ├ /blog/[language]/post/[slug]
│ ├ /blog/zh/post/[slug]
│ ├ /blog/ja/post/[slug]
│ └ /blog/en/post/[slug]

Now I add a generateStaticParams. The static params covered blog return s-maxage and swr now.

"use cache";
... ...
export async function generateStaticParams() {
  // Pre-generate first page for each language
  const blogs = await getBlogSlugAndLanguages();
  return blogs;
}

export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
  cacheTag((await params).slug);
  return (
    <Suspense>
      <DynamicBlogDetailPage params={params} />
    </Suspense>
  );
}

and the build result:

 ◐ /blog/[language]/post/[slug]                             15m      1y
│ ├ /blog/[language]/post/[slug]                             15m      1y.  
│ ├ /blog/en/post/[slug]                                                              
│ ├ /blog/en/post/my-blog-slug                        15m      1y
│ └ [+56 more paths]

now it retuns s-maxage=900, stale-while-revalidate=31535100

emmmm,I want to check route in dev mode.
But I found now I can build and start it normally, but when I run pnpm run dev. It fails on every request:

Cannot redefine property: _debugInfo

emmm... I need to figure it out first.

[fairjm]

I figure it out.... dev not allow layout that just return children and has 'use cache'. So I removed some empty layout like:

"use cache";
import React from "react";

const BlogRootLayout = async ({ children }: { children: React.ReactNode }) => {
  return children;
};

export default BlogRootLayout;

build result ( I removed generateStaticParams ):

├ ○ /blog
├ ◐ /blog/[language]                                         15m      1y
│ ├ /blog/[language]                                         15m      1y
│ ├ /blog/zh                                                 15m      1y
│ ├ /blog/ja                                                 15m      1y
│ └ /blog/en                                                 15m      1y
├ ◐ /blog/[language]/[page]                                  15m      1w
│ ├ /blog/[language]/[page]                                  15m      1w
│ ├ /blog/en/[page]
│ ├ /blog/en/1                                               15m      1w
│ └ [+4 more paths]
├ ◐ /blog/[language]/post/[slug]
│ ├ /blog/[language]/post/[slug]
│ ├ /blog/zh/post/[slug]
│ ├ /blog/ja/post/[slug]
│ └ /blog/en/post/[slug]
├ ● /blog/sitemap/[__metadata_id__]                          15m      1y
│ ├ /blog/sitemap/0.xml                                      15m      1y
│ ├ /blog/sitemap/1.xml                                      15m      1y
│ ├ /blog/sitemap/2.xml                                      15m      1y
│ └ /blog/sitemap/3.xml                                      15m      1y
├ ○ /robots.txt
├ ○ /sitemap.xml
└ ○ /test

○  (Static)             prerendered as static content
●  (SSG)                prerendered as static HTML (uses generateStaticParams)
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
ƒ  (Dynamic)            server-rendered on demand

and the response header:

[fairjm]

I can see the blog post page use cache in dev.

cache works fine. But why there is no Revalidate and Expire after build and cache-control always return no-store.(I want it be like force-static before)