Support Incremental Full Route Cache on Dynamic Segments

[awinogrodzki]

Hello,

Before migrating to App Router, I was using Incremental Static Regeneration to generate static pages on the fly.

I am running a CMS app with routes similar to /blog/[slug], which means that I cannot generate pages during build time and cannot use Full Route Cache that comes with Next.js 13/14

I have a single API call during blog post render cycle, which is successfully cached.

Even with this API call coming from cache, my throughput dropped from 250-300 requests/s to at most 10 requests/s on production instances

This is a drastic change that has been reflected in infrastructure costs.

It's basically impossible to revert to Incremental Static Regeneration at this moment as most of the new features use App Router.

Are there any plans to bring Full Route Cache to Dynamic Segments?

[HarleySalas]

you can *optionally use generateStaticParams at build time, to ensure that existing pages are already ready and waiting for users after each build. After that, any updates can be revalidated and additions will be cached at runtime as well.

You just make a page async as a server component and after it's fetched for the first time, it will be statically cached by default.

Is this behavior missing anything, or am I missing something?

[jhp0115]

When I wrote export const dynamicParams = true; in Page.tsx file, I found dynamic routes can also be cached. (tested with next.js 14.1.4)

export const dynamicParams = true;


export async function generateStaticParams() { /* ... */ }
export default async function Page(/* ... */) { /* ... */ }

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#replacing-fallback

In this link, I found the following sentence:

"With dynamicParams set to true (the default), when a route segment is requested that hasn't been generated, it will be server-rendered and cached."

When I omit this in Page.tsx, dynamic routes were not cached, but when I add this and explicitly set to true, dynamic routes were cached.

[phips28]

Good to know @jhp0115 . does that also work when you remove generateStaticParams() ?

[jhp0115]

When I remove generateStaticParams(), it didn't work.

But I think returning an empty array in generateStaticParams() can be a way when no params are determined.

[Sammeeey]

If this works, that's great!
How can I test whether my pages get cached on the server?

Looks like this for me now

Route (app)                              Size     First Load JS
┌ ○ /                                    2.04 kB        92.7 kB
├ ○ /_not-found                          870 B          84.8 kB
├ ● /[hpId]        <<<----😍
...


ƒ Middleware                             763 kB

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
λ  (Dynamic)  server-rendered on demand using Node.js

... using

export const generateStaticParams = async () => {
  return [];
};

[jhp0115]

You can find the static html file in .next/server/app/... after you access a new route..!

For an example, if your target route is /hpid-1234, hpid-1234.html, hpid-1234.meta and hpid-1234.rsc will be generated in .next/server/app/ after you run the server and access the route.

(I checked returning an empty array in generateStaticParams() works.)