Server side rendering (SSR) and Static Site Generation (SSG) are two ways to create websites using a modern front-end stack (getting content from a server API) while preserving SEO friendliness and perceived performance. Lately Incremental Static Regeneration (ISR) by Next.js offers a third way that's a sort of hybrid between the other two.
Here I show the reasons to choose SSR, SSG or ISR for you next project, in particular for the React ecosystem.
With SSR, the website pages are generated at runtime on the server. This means that the server must be able to execute Node.js to generate the pages. The advantage is that the pages are always up-to-date, but every page view triggers a call to the APIs.
getInitialProps
static method) and creates pure static pages that don’t need server processingWith SSG, all the pages are generated at build time as static pages (with some Javascript tricks to load/preload content as fast as possible). The Time-To-First-Byte is the best you can get and you can host your website on a static hosting platform like Netlify.
The problem is that the content becomes stale, so you need to rebuild the website pages to update it. Netlify or Zeit Now provide hooks to trigger a rebuild from a remote app, like a CMS.
Since you call the APIs only at build time, you end up calling them fewer times in a day, so that, if you have a cap on the number of API calls, you don’t risk to exceed it.
The main SSG technologies in the React ecosystem are Gatsby and Next.js (which can do both SSR and SSG).
ISR is a new paradigm introduced by Next.js starting from v9.5. It combines the advantages of static generation (very quick response time) and server rendering (fresh data, ability to have >100K pages).
How does it work?
revalidate
prop in getStaticProps
).Suppose that you have an e-commerce site with 50.000 products: you could decide to have the 2.000 best sellers statically generated (the build time won't be too long) so that they are always served very quickly. The other products' pages (the "long tail") will have a slower response time just for the first request, then they will be statically generated for the subsequent requests.
Today I'd choose a static site anytime, unless:
In that cases I'd choose Next.js incremental static regeneration.
NOTE: I created a CMS with Visual editing for React, called React Bricks, which works with every strategy (SSG with Next.js and soon Gatsby, SSR or ISR with Next.js) 🚀 It is great for Developers (content blocks created as React components) and for Content creators (visual editing experience). I suggest you to do the Tutorial with gamification and Tweet the score you got! 😊
Be the first to discover our latest news. No spam, promise.