All Articles

Make fast websites with SSR (Server-Side Rendering) and GatsbyJS

Speed is a competitive advantage when it comes to high-value web metrics like SEO rankings and e-commerce sales. Many sites are built on bloated frameworks and are not optimized for speed, creating opportunity for savvy developers and marketers to gain an edge by building sites that load extremely quickly.

SSR (Server-side rendering) is the term for a content publisher developing a site using a modern tooling chain that compiles to static pages on a server. It’s the compiled, static pages that can then be served to the audience extremely quickly and with very fast response times because there’s no need to process the user’s input on a server. All the files have been generated ahead of time and can be delivered to the user extremely efficiently, usually via a CDN (a Content Delivery Network).

React developers have a number of tools available for generating SSR content like Next.js and Gatsby.js. I’ve been using Gatsby.js on a number of recent projects and I have really been enjoying the whole developer experience Gatsby.js provides and they seem to be taking funding and expanding operations at a healthy pace. Standout Gatsby.js features that I love are live updates in the browser for most development tasks, a source plugin system for easy integration with many popular data sources and native GraphQL support out of the box.

SSR sites are recompiled when a change is made and there are a number of solutions available to keep your site up and provide a CD/CI (Continuous Deployment / Continuous Integration) experience where your changes are automatically pushed live to your site. One solution I’ve leveraged is hosting content on a managed content service like Contentful and adding a webhook that triggers a new build each time your content is updated or new content is published.

Google is giving preferential treatment to sites with good Lighthouse scores and serving static sites is a great way to get those page-ranking numbers up. Take a look at Gatsby.js or another SSR tool to get started with SSR today.