TutorialsWhen to use SSR with Next.js
Learn when to use SSR or SSG with your Next.js application
Table of Contents
Server-Side Rendering (SSR) is a rather foundational concept of rendering HTML pages on the server before sending them to the client. During the SPA-craze of the 2010s, server-side rendered pages were considered obsolete and slow, because web applications built with the SPA architecture offered an easier way to deploy applications, together with the separation of concerns that brought the bulk of the complexity to the client-side.
Nowadays, SSR and transactional web applications are becoming the developers' favorite way to develop modern full-stack applications: that means, the first navigation is rendered by the server, and the subsequent navigations through page pre-fetching and client-side navigations using the History API.
Here are the main factors that helped developers transition to Transactional Web applications:
- The evolution of client-side frameworks to support SSR (Next.js, Vue, Remix, Angular Universal, Solid, etc.)
- The evolution of PaaS providers that help developers deploy SSR-ready frameworks as easily as using
git push: among these is Vercel, which is the leading provider that allows zero-click deployments of many SSR frameworks (despite developing their own!)
Server-Side Rendering, as we've seen, is the process of rendering the initial navigation on the server, followed by client-side navigations (eg. without fully reloading the page).
The above brings us to the question: when to use SSR for our application?
The good news is that with many frameworks we have the flexibility to choose when to use SSR (Server-Side Rendering), or SSG (Static-Site Generation). In fact, the Makerkit SaaS boilerplate does exactly that.
Many stress about the performance and SEO benefits of server-side rendering your pages (which are valid points), but there's more: SSR can also help you build more dynamic pages with less effort from a developer's perspective.
- SEO - The first valid point of using SSR is that it can help the pages that need crawling for SEO reasons
- Faster Initial Rendering - The second point is that SSR (compared to CLient-Side Rendering) can help you make your website faster for the initial navigation (FCP)
- Better DX (Dev Experience) - Helps developers combine server-side logic for cumbersome interactions on the client-side: for example, displaying a loading spinner every time we fetch data from the server: this can be avoided for the initial navigation by serving a fully-rendered page.
- Huge websites - Ideal for displaying thousands (or more!) pages stored in a database that would be too costly or slow to build using SSG
SSG (or Static-Site generation) is the process of generating HTML pages statically, i.e. instead of being rendered on-demand by a web server, they're generated as static HTML files that do not change until the next deployment.
The benefits of using SSG for rendering your Next.js application are clear:
- Faster - They are faster than SSR-rendered pages
- Cheaper - They are cheaper to serve since no server runtime is needed
- Easy to Deploy - They are extremely easy to host anywhere (Github Pages, CloudFlare, etc.)
The cons of using SSG with Next.js, instead, are that these pages will use client-side rendering for the dynamic parts, making them not the best choice for various scenarios, for example:
- Customizing the user experience
- Managing the user's authentication
- Slow when building thousands of pages
- Not ideal for content that changes quickly
So, which parts of the application should be statically generated? For example, in Makerkit, we only server-side render:
- The landing pages of the website
- The blog and the documentation pages
These pages are ideal because they do not change when the user is authenticated or not, and can potentially be high-traffic pages since they contain informational content that can bring many visitors from search engines: SSG, in this case, helps reduce the costs associated with traffic volume.
Ultimately, we can say that SSG is ideal for informational content that does not change. But what if it changes and you do not want to use SSR? Enter ISR.
If you're using Vercel, you can also use proprietary technology and techniques such as ISR (Incremental Static Regeneration). With ISR, you can instruct Vercel to re-generate a page based on a certain time window you can provide (for example, every 1 minute).
ISR is ideal for static pages that need to be continuously updated, such as an eCommerce product page for displaying changes to pricing, availability, reviews, etc.
The main drawback of ISR is that your Vercel bill will increase substantially, so it's something I'd use carefully and only for certain scenarios like the above.