React is great, but it’s quite overkill for most sites. Downloading the framework and the content too before anything shows up? That’s no good. Server rendering can help, but it’s tricky to set up and is prone to issues if it’s not kept on top of. Is there a way to get the composibility of React without any of the icky JS-only website stuff?
Turns out there is.
Gatsby is a static site generator for React applications. Tell it which are pages and it does the rest for you. Recently v2 came out with a bunch of improvements in speed and setup. In the latest edition of Net magazine we go through those new features and how to create a site with it.
The thing about server rendered websites was the setup - it terrified me. Things would break that I wasn’t expecting, plus you need to worry about data gets fetched and what bundles are needed for what endpoints. Gatsby sets up everything automatically, including making the best code bundles for optimum load times for the end user.
Plus if you’re looking for an excuse, it comes with GraphQL support out of the box. It works through a tagged template literal and some gatsby magic 🧙. Everything works off of a node and GraphQL queries those nodes for anything you need.
This tutorial goes a little bit further than a Hello World and makes a blogging platform out of Gatsby and it’s various plugins. Write posts in Markdown, create a new build and upload the result. That’s all you need!
The code behind the tutorial is up on Github. If you want to see the end result, the demo is there to play around with too. It’s quite colourful, and you’ll learn some bonus tips about Gatsby in the process. Winner!
If it taught me anything, it’s that this blog could become a Gatsby-powered one in the future. Right now it’s Jekyll as Github Pages seems to love it. It’s powered by Ruby, which is a little out of my wheelhouse. Giving it some React love might give it some life…