generateStaticParams for a dynamic page.
Answered
Harlequin Duck posted this in #help-forum
Harlequin DuckOP
So as i learned in this issue (https://github.com/vercel/next.js/issues/44712) you can't use generateStaticParams anywhere above a route that has dynamic content.
Now i can work around this by simply calling generateStaticParams only on pages that are 100% static.
But what about pages that have a tiny little dynamic component, but a huge amount of dynamic content that could be statically generated.
Do i have no other choice then making it all dynamic?
For Example i have a page with a lot of static content, that content however is language dependent, and therefor depends on the params. This content could be generated at build time perfectly well.
Now the page has a little dynamic component that could easily be streamed in later. I would like only this tiny component to be dynamic. All the static, language dependent content could be prerendered.
So that at the dynamic render Next.js would not have to read my language.json everytime.
Can i achieve this somehow? Or is this something that the new shiny PPR will be all about?
An Example of what i want to do:
Now i can work around this by simply calling generateStaticParams only on pages that are 100% static.
But what about pages that have a tiny little dynamic component, but a huge amount of dynamic content that could be statically generated.
Do i have no other choice then making it all dynamic?
For Example i have a page with a lot of static content, that content however is language dependent, and therefor depends on the params. This content could be generated at build time perfectly well.
Now the page has a little dynamic component that could easily be streamed in later. I would like only this tiny component to be dynamic. All the static, language dependent content could be prerendered.
So that at the dynamic render Next.js would not have to read my language.json everytime.
Can i achieve this somehow? Or is this something that the new shiny PPR will be all about?
An Example of what i want to do:
//generate all possible params
export async function generateStaticParams() {
return staticParamMap
}
const PageDynStatic= async ({params}) => {
//The params should all be prerendered, so every dictionary should already be known by Next.js.
const dictionary = await getDictionary(params.lang);
return (
<>
{/*IAmStatic is not dynamic so it should not need to be rerendered on every render*/}
<IAmStatic alotOfText={dictionary } />
{/*IAmDynamic is dynamic so it should be rerendered on every render*/}
<IAmDynamic rerenderOnEachRequest alotOfText={dictionary } />
</>
);
};
export default PageDynStatic;
//make the page dynamic
export const revalidate = 0;
export const dynamic = "force-dynamic";Answered by Ray
you could use client side rendering for the dynamic content if it doesn't need SEO so it can prerender in a html file. also, the GET route handler can be SSG/SSR/ISR.
I got a [demo](https://mix-content.vercel.app/) here
if it does, then try PPR
I got a [demo](https://mix-content.vercel.app/) here
if it does, then try PPR
3 Replies
@Harlequin Duck So as i learned in this issue (https://github.com/vercel/next.js/issues/44712) you can't use generateStaticParams anywhere above a route that has dynamic content.
Now i can work around this by simply calling generateStaticParams only on pages that are 100% static.
But what about pages that have a tiny little dynamic component, but a huge amount of *dynamic* content that could be statically generated.
Do i have no other choice then making it all dynamic?
For Example i have a page with a lot of static content, that content however is language dependent, and therefor depends on the params. This content could be generated at build time perfectly well.
Now the page has a little dynamic component that could easily be streamed in later. I would like only this tiny component to be dynamic. All the static, language dependent content could be prerendered.
So that at the dynamic render Next.js would not have to read my language.json everytime.
Can i achieve this somehow? Or is this something that the new shiny PPR will be all about?
An Example of what i want to do:
Typescript
//generate all possible params
export async function generateStaticParams() {
return staticParamMap
}
const PageDynStatic= async ({params}) => {
//The params should all be prerendered, so every dictionary should already be known by Next.js.
const dictionary = await getDictionary(params.lang);
return (
<>
{/*IAmStatic is not dynamic so it should not need to be rerendered on every render*/}
<IAmStatic alotOfText={dictionary } />
{/*IAmDynamic is dynamic so it should be rerendered on every render*/}
<IAmDynamic rerenderOnEachRequest alotOfText={dictionary } />
</>
);
};
export default PageDynStatic;
//make the page dynamic
export const revalidate = 0;
export const dynamic = "force-dynamic";
you could use client side rendering for the dynamic content if it doesn't need SEO so it can prerender in a html file. also, the GET route handler can be SSG/SSR/ISR.
I got a [demo](https://mix-content.vercel.app/) here
if it does, then try PPR
I got a [demo](https://mix-content.vercel.app/) here
if it does, then try PPR
Answer
but I'm not sure if the crawler will see dynamic content in PPR too because they should be wrapped with Suspense
Harlequin DuckOP
Yea. I just really need some dynamic server components in my route.
But I probably, definitely went overboard with what I wanted.
For now I am just gonna make the entire route dynamic without any generatStaticParamas if there is any truely dynamic server content in it.
If I have more time and PPR is stable I will come back to this tho!
Thanks you @Ray <3
But I probably, definitely went overboard with what I wanted.
For now I am just gonna make the entire route dynamic without any generatStaticParamas if there is any truely dynamic server content in it.
If I have more time and PPR is stable I will come back to this tho!
Thanks you @Ray <3