Learn Next - Chapter 10 (Static vs Dynamic Rendering)
Answered
American posted this in #help-forum
AmericanOP
https://nextjs.org/learn/dashboard-app/partial-prerendering
So in chapter 8, static and dynamic rendering were explained. Was kinda confusing without any examples but after some reading I think I understand a bit. However what confused me is the question in chapter 10, asking us which components are static and which are dynamic. Since no dynamic functions were being used I thought they'd all be static, the solution says otherwise though. Running next build shows that the routes are static, so is this a mistake? (Probably a misunderstanding from my side :P )
And one more question. Since everything seems to be statically rendered now, what about the fetches done in CardWrapper and the other components? Do these get cached as well (during build time)? If the data gets updated by any chance in the db will the changes be reflected?
So in chapter 8, static and dynamic rendering were explained. Was kinda confusing without any examples but after some reading I think I understand a bit. However what confused me is the question in chapter 10, asking us which components are static and which are dynamic. Since no dynamic functions were being used I thought they'd all be static, the solution says otherwise though. Running next build shows that the routes are static, so is this a mistake? (Probably a misunderstanding from my side :P )
And one more question. Since everything seems to be statically rendered now, what about the fetches done in CardWrapper and the other components? Do these get cached as well (during build time)? If the data gets updated by any chance in the db will the changes be reflected?
Answered by Rafael Almeida
have you tried using a different
cache setting with fetch? if you want to change the entire page as dynamic you can use a route segment config: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic9 Replies
@American https://nextjs.org/learn/dashboard-app/partial-prerendering
So in chapter 8, static and dynamic rendering were explained. Was kinda confusing without any examples but after some reading I think I understand a bit. However what confused me is the question in chapter 10, asking us which components are static and which are dynamic. Since no dynamic functions were being used I thought they'd all be static, the solution says otherwise though. Running next build shows that the routes are static, so is this a mistake? (Probably a misunderstanding from my side :P )
And one more question. Since everything seems to be statically rendered now, what about the fetches done in CardWrapper and the other components? Do these get cached as well (during build time)? If the data gets updated by any chance in the db will the changes be reflected?
the dynamic/static nomeclature here are more about the data itself than the rendering method. the menu is static because it doesn't change depending on the user that is seeing it, but the data on the right is all dynamic because it either changes constantly or it depends on who is viewing it.
since you enabled PPR and wrapped the
And one more question. Since everything seems to be statically rendered now, what about the fetches done in CardWrapper and the other components? Do these get cached as well (during build time)? If the data gets updated by any chance in the db will the changes be reflected?
since you enabled PPR and wrapped the
CardWrapper component with Suspense, the page will be statically served but these card requests within CardWrapper will be done on the server and streamed from to the client once it is ready. I am not sure if the caching depends on the route segment config for that so you might want to test it with a production build and some logs to be sureAmericanOP
since you enabled PPR and wrapped the CardWrapper component with Suspense, the page will be statically served but these card requests within CardWrapper will be done on the server and streamed from to the client once it is ready. I am not sure if the caching depends on the route segment config for that so you might want to test it with a production build and some logs to be sure
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data
not sure if this applies to the fetch methods we have (fetchCardData for example), but let's assume that it does. in case of static rendering and since fetch by default will cache the results, I guess this means that unless the options of the fetch are changed, the data will be sent from the server and will always stay the same, right?
AmericanOP
just an update, that seems to be the case. I changed the data in the database and the only way to reflect the changes in production is to redeploy
AmericanOP
I would love to know how can I make the page render dynamically, if anyone can help :)
@American I would love to know how can I make the page render dynamically, if anyone can help :)
have you tried using a different
cache setting with fetch? if you want to change the entire page as dynamic you can use a route segment config: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamicAnswer
AmericanOP
the thing is, this isn't even with fetch.
the page where the card component calls this is statically rendered
this is kinda annoying though, am I gonna have to use it every time I fetch data from somewhere but without using the "fetch" method? (eg if I'm using a function from a server component that returns some data, like this case for example)