Subscribe for Free Tips, Tutorials, and Special Discounts
We're in this together!
We respect your privacy. Unsubscribe at any time.
Question: Why should I use Static Site Generation?
Answer: Static site generation is only valuable if you want a site that is highly reliable and very performant. So... yeah, you really should use Static Site Generation (or SSG) as much as you can.
So what is a statically generated site? In short, it's a bunch of HTML, CSS and JS files hosted on an HTTP/HTTPS server somewhere, most likely a Content Distribution Network (CDN) or an object store like S3.
The great thing about a static site is that it is incredibly reliable, as long as the CDN or S3 is up and configured properly, the site is up. It's also very fast because you aren't computing the HTML on every request. You have pre-computed the HTML and stored it in a file which you then serve on every request.
NextJS has supported static site generation from version 12 onwards. Both the original Pages Router and the App Router support SSG on a per-route basis. That means that your home page route could be statically generated while other routes are dynamically server side rendered (SSR'ed).
What happens with statically generated routes is that when the application is built the pages are rendered into HTML files that are stored in the .next
directory. How you put those on the static server is up to whatever deployment mechanism you use, it's just important to note that any API calls to build the static pages will be done at build time for SSG routes.
So if static sites and static routes are so great, why not use them for everything? The issue is that every user gets exactly the same page. And that's not ideal for highly customized logged-in experiences. There are ways around this limitation if you have a route that is primarly static but that has a little user specific interactions in it. But primarily static site generation is only useful when every customer will see the exact same page.
Share this article with your friends
Written by Jack Herrington
Jack Herrington is a Full Stack Principal Engineer who orchestrated the rollout of React/NextJS at Walmart Labs and Nike. He is also the "Blue Collar Coder" on YouTube where he posts weekly videos on advanced use of React and NextJS as well as other frontend technologies trends. His YouTube channel hosts an entire free courses on React and TypeScript. He has written seven books including most recently No-BS TypeScript which is a companion book to the YouTube course.