What decides SSG?
Unanswered
Skipjack tuna posted this in #help-forum
Skipjack tunaOP
Hey there, so in a chapter "Implement SSG" in an online Next.js course, the instructor says that by adding "cache: force-cache" within the fetch function, we can implement basically cause Static Site Generation. Is that true though? I dont know... online, I came across other resources which say that this has nothing to do with the SSG itself. SSG will be caused by using "getStaticProps", not by using any caching options. The caching action is only there to fetch data from the cache (if available)...
Yet, the instructor did NOT use getStaticProps, and during the build, Next.js used SSG for that site. Im pretty confused at this point.
Please let me know if I understood these things wrong.
Yet, the instructor did NOT use getStaticProps, and during the build, Next.js used SSG for that site. Im pretty confused at this point.
Please let me know if I understood these things wrong.
21 Replies
in the app router, you can use
export const dynamic = 'force-static'"cache: force-cache" is just an option for the fetch function
Skipjack tunaOP
I see, thank you for that! The instructor used the pages router and Next.js 14. She did not use any of the 2 options, only "cache: force-cache" and the pages were converted to SSG when using the build command.
Now what if you dont provide anything on page - will it by default become SSG?
Now what if you dont provide anything on page - will it by default become SSG?
@Skipjack tuna I see, thank you for that! The instructor used the pages router and Next.js 14. She did not use any of the 2 options, only "cache: force-cache" and the pages were converted to SSG when using the build command.
Now what if you dont provide anything on page - will it by default become SSG?
as long as you have a fetch (or may fetches with force-cache) in the page becomes a static one
@James4u as long as you have a fetch (or may fetches with force-cache) in the page becomes a static one
Skipjack tunaOP
So a basic rule of thumb for the app router could be: If I use fetch (and only then?) within a page, it automatically becomes SSG'd by default. If I want ISR in there, I will add the next-revalidate option, and if I want to be SSR, I will add "cache: no-cache. What do you think?
so to summarize, to ensure your page is static, rather than using
cache: force-cache I would recommend using export const dynamic = 'force-static'@James4u so to summarize, to ensure your page is static, rather than using `cache: force-cache` I would recommend using `export const dynamic = 'force-static'`
Skipjack tunaOP
Okay, I see. But if the page's default is always SSG anyways when using fetch, is force-static still necessary at all?
by default it's
no-storenot static by default, that's why you added "force-cache", right?
@James4u not static by default, that's why you added "force-cache", right?
Skipjack tunaOP
You are right, my bad. I think my problem of understanding is the following:
I personally understand the concepts of SSG, ISR and SSR pretty well, I'd say.
My problem is - I can't really wrap my head around WHEN and through what actions on my (the developer's behalf) next.js creates a page via SSG / ISR / SSR. Like, I don't understand what that depends on, and what actions in my code cause a page to be created via SSG, ISR or SSR. I worked with Next.js 14 the last time, so maybe some things I assume are a little outdated
I personally understand the concepts of SSG, ISR and SSR pretty well, I'd say.
My problem is - I can't really wrap my head around WHEN and through what actions on my (the developer's behalf) next.js creates a page via SSG / ISR / SSR. Like, I don't understand what that depends on, and what actions in my code cause a page to be created via SSG, ISR or SSR. I worked with Next.js 14 the last time, so maybe some things I assume are a little outdated
Does it only depend on my cache settings within a fetch function? What if there is no fetch function? These things are cooking me. Other than that, I understand the concepts of the different rendering approaches
@Skipjack tuna Does it only depend on my cache settings within a fetch function? What if there is no fetch function? These things are cooking me. Other than that, I understand the concepts of the different rendering approaches
well, what I shared is page-level settings for the cache - let say you have a fetch with "cache: force-cache" but you have
export const dynamic = "force-dynamic"your page becomes dynamic
@Skipjack tuna Does it only depend on my cache settings within a fetch function? What if there is no fetch function? These things are cooking me. Other than that, I understand the concepts of the different rendering approaches
yes, if you don't have any fetches in side your page or any dynamic operations, your page becomes static by default
if you build your project, you have the output in your terminal and you have very good build map (sorry for the bad word but) that helps you to understand what pages are dynamic/static/ISR ...
@Skipjack tuna Thanks a lot!
yr welcome! please mark solution to close this thread if you don't have any other questions
@James4u yr welcome! please mark solution to close this thread if you don't have any other questions
Skipjack tunaOP
Just to wrap this up so I wont have to ask again (correct me if Im wrong):
1. If I want ISR in Next.js 15, I only export this at the top of my component:
2. If I want SSG in Next.js 15, I only export this at the top of my component:
3. If I dont specify anything and do not fetch anything, it will be a SSG by default.
4. If I fetch data and dont specify anything, it will be SSR by default.
1. If I want ISR in Next.js 15, I only export this at the top of my component:
export const revalidate = 10;2. If I want SSG in Next.js 15, I only export this at the top of my component:
export const dynamic = 'force-static';3. If I dont specify anything and do not fetch anything, it will be a SSG by default.
4. If I fetch data and dont specify anything, it will be SSR by default.