Next.js Discord

Discord Forum

cacheComponents & generateStaticParams

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
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.

5 Replies

Haddock
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.
Patrick MacDonald
@Asiatic Lion can we have one default param that say maybe shows some kind of default or like user john doe?
Asiatic LionOP
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!
Patrick MacDonald
For isr would you need to revalidate path to tell the server there's a page now?