Static generation of a page but with dynamic layout?
Answered
Red ant posted this in #help-forum
Red antOP
Hi,
I am trying to understand better static site generation, and found some issues of what I were expecting.
First a bit of context:
I got a blog with the current app layout:
app/[local]/layout.tsx & page.tsx
app/[local]/entry/layout.tsx
app/[local]/entry/[slug]/page.tsx
app/[local]/entry/[slug]/page.tsx is set to be static with revalidation tags to allow for ISR, however when I visit the page I see that some of the sidebar components defined in app/[local]/entry/layout.tsx render the wrong data as they should be generated dynamically on the server.
The sidebar components all have Suspense boundaries, so I would expect them to not be static, however they still contain out of date data as they are statically generated.
Does this mean that if a page is set to static, all parents are also statically generated?
I noticed that If I make the component client it will update, as I can useEffect to fetch data and update the component.
I wonder if there is a way to only make the content of the page static and keep the rest dynamic with SSR.
Thanks in advance!
I am trying to understand better static site generation, and found some issues of what I were expecting.
First a bit of context:
I got a blog with the current app layout:
app/[local]/layout.tsx & page.tsx
app/[local]/entry/layout.tsx
app/[local]/entry/[slug]/page.tsx
app/[local]/entry/[slug]/page.tsx is set to be static with revalidation tags to allow for ISR, however when I visit the page I see that some of the sidebar components defined in app/[local]/entry/layout.tsx render the wrong data as they should be generated dynamically on the server.
The sidebar components all have Suspense boundaries, so I would expect them to not be static, however they still contain out of date data as they are statically generated.
Does this mean that if a page is set to static, all parents are also statically generated?
I noticed that If I make the component client it will update, as I can useEffect to fetch data and update the component.
I wonder if there is a way to only make the content of the page static and keep the rest dynamic with SSR.
Thanks in advance!
Answered by Asian paper wasp
I wonder if there is a way to only make the content of the page static and keep the rest dynamic with SSR.There is a thing called Partial Pre-rendering which does exactly what you are trying to achieve. Yet, it is unstable for now, so it is up to your decision to use it or not
5 Replies
Asian paper wasp
I wonder if there is a way to only make the content of the page static and keep the rest dynamic with SSR.There is a thing called Partial Pre-rendering which does exactly what you are trying to achieve. Yet, it is unstable for now, so it is up to your decision to use it or not
Answer
Asian paper wasp
Otherwise, no, the decision of whether the page is dynamic or static is at page level
Red antOP
@Asian paper wasp Thanks for the answer I will look at the Partial Pre-Rendering and have a look around.
Otherwise, no, the decision of whether the page is dynamic or static is at page levelSo, if I set the page to static all will be static (including layout), if I set a layout to force-dynamic would that force the page.tsx to dynamic then also ? Even if i specify force-static in the page?
Asian paper wasp
Not sure if Next.js will complain if you specify both force static and dynamic, but basically, it can only be one
Red antOP
Many thanks @Asian paper wasp for the help ^^
Did a quick test seems like it forces it all to dynamic, I will have a proper look later in the day. Also thanks for pointing PPR out ^^
For the sake of TLDR for other users:
In my case if
Did a quick test seems like it forces it all to dynamic, I will have a proper look later in the day. Also thanks for pointing PPR out ^^
For the sake of TLDR for other users:
In my case if
app/[local]/entry/[slug]/page.tsx is set to force-static static, so will be app/[local]/layout.tsx & page.tsx and app/[local]/entry/layout.tsx. Partial Pre-Render is what you would be after or anything dynamic needs to be a client component that re-renders/gets data at any point in time on load.