cacheComponents & generateStaticParams

[carmine sapphire]

I have a catch-all page that uses dynamic segments:

// /app/[[...segments]]/page.tsx
export function CatchAllPage({params}: CatchAllPageProps) {
    ...page stuff here
}

When I have cacheComponents disabled, I can return an empty array from generateStaticParams:

export function generateStaticParams() {
   return [];
}

This causes NextJs to statically generate each version of the page on the first request. So if someone visits /about, the first time it's loaded dynamically and then subsequent requests get a cached version.

When cacheComponents is enabled, you can't do this as you have to provide at least one set of params to generateStaticParams.

The issue is that I don't know what my params are at build time. They are CMS pages that can be created after the build is complete.

So my question is, when using cache components, is there any way to replicate the behaviour of returning an empty array from generateStaticParams? So that each version of the page is cached after the first request.

[neat ruin]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[sudden flicker]

No, with cacheComponents enbled, you can't replicate returning an empty generateStaticParams().

you must provide at least one param and rely on data-level caching to cache each page after its first request.

[stark rivet]

@carmine sapphire can we have one default param that say maybe shows some kind of default or like user john doe?

[carmine sapphire]

I'm making progress with this but it's still not quite working as expected. Referring to this comment on GitHub:

https://github.com/vercel/next.js/issues/82477#issuecomment-3321468224

If you added generateStaticPararms and removed the Suspense boundary around the await params Next.js would instead treat this page as requiring a full ISR prerender for each unique param it encounters (at build or at runtime).

This seems to indicate to me that if I just pass one param set (for example the home page) to generateStaticParams then this will generate at build time and all the other pages at runtime?

So I updated my code to:

export const generateStaticParams = () => {
    return [{segments: []}]
}

This is equivalent to a request to /, the homepage. The homepage does now statically generate using ISR, but no other pages do. For example if I go to /about then this still loads dynamically every time when I deploy it on Vercel (note: it seems to work when deployed locally).

According to the comment above, shouldn't ISR work for routes discovered at runtime too?

Here is how my CatchAllPage is currently set up:

async function PageContent({slug}: { slug: string }) {
    'use cache'
    cacheLife('max');

    const pageDetails = await apiClient.pages.getBySlug(slug);

    if (!pageDetails) {
        notFound();
    }

    cacheTag(`page-${pageDetails.id}`);

    return (
        <BlockContent blocks={pageDetails.content}/>
    );
}

export async function CatchAllPage({params}: CatchAllPageProps) {
    const slug = await getSlug(params);
    return <PageContent slug={slug}/>
}

Thank you!