Is it possible to pass extra data during generateStaticParams on app router?
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
I'm trying to migrate a enterprise solution from gatsby to next, but unfortunately we have some legacy rest api:s. We have a api/news/all/ endpoint that returns way too much data that we hit the 2mb limit, and then i use generateStaticParams to create the slugs in news/[slug]/page.tsx.
What ends up happening is that thousands of news pages will refetch api/news/all/ and since it's never cached and i'm unable to use api/news/[id] since i only have the slug param in news/[slug]/page.tsx the build time is forever.
https://github.com/vercel/next.js/discussions/11272 i found this discussion but it was closed with a vague text about app router being able to cache fetch but that wasn't what was being asked in the discussion.
Is it possible to keep using news/[slug]/page.tsx while also being able to fetch api/news/[id] based on the id from api/news/all/?
What ends up happening is that thousands of news pages will refetch api/news/all/ and since it's never cached and i'm unable to use api/news/[id] since i only have the slug param in news/[slug]/page.tsx the build time is forever.
https://github.com/vercel/next.js/discussions/11272 i found this discussion but it was closed with a vague text about app router being able to cache fetch but that wasn't what was being asked in the discussion.
Is it possible to keep using news/[slug]/page.tsx while also being able to fetch api/news/[id] based on the id from api/news/all/?
Answered by fuma
Yes, absolutely.
The preferred way is to cache the data, however, if it exceeds the Data Cache, you have two ways:
Upgrade your plan - Vercel is not cheap, but it's worth considering
I don't sure what do you mean by "fetch api/news/[id] based on the id from api/news/all", normally you can use the id as the slug, and receive the slug from
Or why don't implement your own cache with hashmap/some similar? Since your site (technoically) is generated at build time, you can store the result somewhere and use it everywhere in your code.
Notice that
The preferred way is to cache the data, however, if it exceeds the Data Cache, you have two ways:
cache function from React.js - It is an in-memory cache that doesn't have a limit. Make sure to disable the built-in cache with no-store cache option in fetch.Upgrade your plan - Vercel is not cheap, but it's worth considering
I don't sure what do you mean by "fetch api/news/[id] based on the id from api/news/all", normally you can use the id as the slug, and receive the slug from
params prop. Then fetching /api/news/${params.slug} solves your problem.Or why don't implement your own cache with hashmap/some similar? Since your site (technoically) is generated at build time, you can store the result somewhere and use it everywhere in your code.
Notice that
generateStaticParams doesn't pass data, it only tells Next.js which route to generate.2 Replies
Yes, absolutely.
The preferred way is to cache the data, however, if it exceeds the Data Cache, you have two ways:
Upgrade your plan - Vercel is not cheap, but it's worth considering
I don't sure what do you mean by "fetch api/news/[id] based on the id from api/news/all", normally you can use the id as the slug, and receive the slug from
Or why don't implement your own cache with hashmap/some similar? Since your site (technoically) is generated at build time, you can store the result somewhere and use it everywhere in your code.
Notice that
The preferred way is to cache the data, however, if it exceeds the Data Cache, you have two ways:
cache function from React.js - It is an in-memory cache that doesn't have a limit. Make sure to disable the built-in cache with no-store cache option in fetch.Upgrade your plan - Vercel is not cheap, but it's worth considering
I don't sure what do you mean by "fetch api/news/[id] based on the id from api/news/all", normally you can use the id as the slug, and receive the slug from
params prop. Then fetching /api/news/${params.slug} solves your problem.Or why don't implement your own cache with hashmap/some similar? Since your site (technoically) is generated at build time, you can store the result somewhere and use it everywhere in your code.
Notice that
generateStaticParams doesn't pass data, it only tells Next.js which route to generate.Answer
Asiatic LionOP
@fuma great thanks, yeah using the id for slug would solve the issue but it's a requirement from the client that we use pretty slugs and the api doesn't allow us to send in the slug. At least i know there's options how to solve it