Gatsby is a React-based static site generator (SSG) that combines the best of all worlds: blazing fast static sites using modern, best-practice, front-end development techniques such as route-based code splitting, PRPL, service workers, and offline support; combined with dynamic data integrations via a rich set of plugins (e.g., GraphQL, MongoDB, and even Wordpress!) queried at compile-time. Win-win-win.
— Sorry to interrupt this program! 📺
If you're interested in learning React in a comprehensive and structured way, I highly recommend you try Wes Bos' React for Beginners or Fullstack Advanced React & GraphQL course. Learning from a premium course like that is a serious investment in yourself.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
Gatsby v1.0.0 was released earlier this month to much fanfare. You may be saying to yourself Oh goody, yet another static site generator (YASSG), and your cynicism would be well-founded. According to these two lists, there are ~450 (known) static site generators as of mid-2017. As an up-and-comer, React-based Gatsby is fighting for a top spot amongst the current leading contenders of Jekyll (Ruby), Hugo (Go), and Hexo (Node). While all of these static site generators all share the same goal of combining data with templates to create assets which can be served statically via a CDN, not all static site generators are created equally. Here are some of the new, shiny features that Gatsby boasts that other SSGs haven’t caught on to (yet):
Performance Out the Wazoo
There have been an insane amount of improvements in the world of front-end development in the last five years alone, many having to do with how we optimize applications for speed. Gatsby takes all of these modern best-practices into account, including, but not limited to: using code-splitting to reduce the initial page load time; using Google’s PRPL Pattern to start pre-caching related assets after initial page-load; and using a service-worker for offline support. Suffice to say, this is not your typical statically-generated HTML file which reloads on each navigation. This is a fully-featured, top-shelf, single-page application (SPA) disguised as a static file.
GraphQL All the Things
If you’ve ever used a SSG for a more complicated site, you start missing the ease of querying data that you get from a database-backed CMS. Managing a series of YAML or Markdown files can get very, very tedious. Up until now, that was the tradeoff:
static site === static data files. And then came the brilliant idea: what if you could use
GraphQL syntax to load data from an almost infinity of sources, then create the static data files at build time? And voilà, the plugin system was born. There are a number of official and unofficial plugins on npm. Not finding what you are looking for? You can build your own using a webpack-like syntax.
SEO Like It’s 1999
escaped_fragment “feature”, then you will be delighted to know that Gatsby is what you might call a “progressive” experience. When you run
gatsby build, the output files in
public/ are plain ol’ HTML. This means that for search engines, all of the content is right there for them to index on the initial fetch. For users, once the page is loaded, a React app is mounted in the root div. From then on, users get the same rich browsing experience of an SPA, but without waiting a decade for the loading spinner to download a 5MB .js file!
Yes you heard that right. The CMS that everyone loves to hate may have just been given a new lease on life via the gatsby-source-wordpress plugin. It is now possible to query the Wordpress JSON API using GraphQL syntax to pull out posts, pages, tags, media, and more, as a data source for your Gatsby static site. If you are shaking your head and wondering But, why?, you are not alone. It’s no secret that many web developers cringe at the word “Wordpress”, but that doesn’t change the fact that about 75M websites are powered with Wordpress, which account for about half of all of the top blogs. The problem with this is two fold: first, it’s easy to use for content creators and has a lot of plugins for customization, so people are reluctant to give it up; but at the same time it is a prime target for security vulnerability scans, and can be expensive to host when most of your traffic is people trying to SQL-inject your
A whole new market has literally just opened — there are 75M websites out there that could keep the same backend interface for authors, while getting the benefits of bleeding-edge front-end development techniques without the risk of being h4x0r’d.
If you are needing a new excuse to re-re-re-design your blog, or you are ready to put a more modern interface on top of an existing CMS without having to start over from scratch, you should check out Gatsby. While it is still not as popular as some of the more established SSGs, it is gaining traction, and for very good reason.
This v1.0.0 launch will no doubt mark a new chapter in the world of SSGs, and as good ideas spread throughout the open-source ecosystem, we can expect to see others learning from and applying some of these best practices in other projects. We may have come full-circle in web development, where static files are cool again. Just like bell-bottoms.
👉 In a future article, we will go through the process of refurbishing a site using Gatsby.