Full Route Cache in App Router
Answered
Sun bear posted this in #help-forum
Sun bearOP
I set up a new project with
I deployed this project to Vercel and visited
and as far as I can tell, the server function is run on every request.
How do I enable the Full Route Cache (https://nextjs.org/docs/app/building-your-application/caching#full-route-cache) so that the whole HTML/RSC result is cached? I would also like to set the Cache-Control headers so my users do not download the route every time.
/app/test/[slug]/page.tsxconst Test = ({ params: { slug } }: { params: { slug: string } }) => {
return <div>Slug: {slug}</div>;
};
export default Test;I deployed this project to Vercel and visited
/test/hello. The response has the following headers, no matter how often I refresh the page:Cache-Control: private, no-cache, no-store, max-age=0, must-revalidateX-Vercel-Cache: MISSand as far as I can tell, the server function is run on every request.
How do I enable the Full Route Cache (https://nextjs.org/docs/app/building-your-application/caching#full-route-cache) so that the whole HTML/RSC result is cached? I would also like to set the Cache-Control headers so my users do not download the route every time.
Answered by Sun bear
Thanks for the hint @joulev; I achieved the desired behavior by specifying:
Now the /test/[slug] route is no longer classified as "Server" but "Static" and is generated once on demand and then cached
I did not have to specify any generateStaticParams (there are too many slugs in my irl example to prerender them all at build time)
export const dynamic = "error";
export const dynamicParams = true;Now the /test/[slug] route is no longer classified as "Server" but "Static" and is generated once on demand and then cached
I did not have to specify any generateStaticParams (there are too many slugs in my irl example to prerender them all at build time)
3 Replies
@Sun bear I set up a new project with `/app/test/[slug]/page.tsx`
tsx
const Test = ({ params: { slug } }: { params: { slug: string } }) => {
return <div>Slug: {slug}</div>;
};
export default Test;
I deployed this project to Vercel and visited `/test/hello`. The response has the following headers, no matter how often I refresh the page:
`Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate`
`X-Vercel-Cache: MISS`
and as far as I can tell, the server function is run on every request.
How do I enable the Full Route Cache (https://nextjs.org/docs/app/building-your-application/caching#full-route-cache) so that the whole HTML/RSC result is cached? I would also like to set the Cache-Control headers so my users do not download the route every time.
since it's a dynamic route, you need [
generateStaticParams](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params) to prerender static routes. you might also need to use the [dynamicParams = false](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) config optionSun bearOP
Thanks for the hint @joulev; I achieved the desired behavior by specifying:
Now the /test/[slug] route is no longer classified as "Server" but "Static" and is generated once on demand and then cached
I did not have to specify any generateStaticParams (there are too many slugs in my irl example to prerender them all at build time)
export const dynamic = "error";
export const dynamicParams = true;Now the /test/[slug] route is no longer classified as "Server" but "Static" and is generated once on demand and then cached
I did not have to specify any generateStaticParams (there are too many slugs in my irl example to prerender them all at build time)
Answer
nice