Nathan Smith
  • Projects
  • About
  • Contact

Migrating to react-static and Netlify

August 1, 2020, 1:47 PMReact

For a long time, my default has been create-react-app and GitHub Pages together to host static sites, this one included. But for static sites, React is almost solely a developer convenience, not a benefit to the end user; if anything, it is a detriment to the end user. React is slow and heavy, especially on mobile where even today bandwidth can be at a premium. You can mitigate this with a pre-rendering solution like react-snap, but all the data for my blog lives on ButterCMS, so pre-rendering only gets me so far if the data isn't pre-fetched. Server-side rendering requires a backend which requires money. I'd tried Gatsby but its typescript support is simply abysmal even though it is now officially supported and its setup is highly opinionated. I found it to be very unstable and knew it would be a difficult migration.

Enter react-static.

Using react-static

Following the same basic idea as Gatsby, react-static fetches your data first then runs your application, providing the data to each component as necessary. The output of this run is bundled as html, css, and javascript. Each route that would normally be dynamic is rendered statically, no more fetching. The migration was fairly simple and the setup is unopinionated; react-static provides a built in "pages" concept where each component in a folder is automatically added as a route, but I was able to freely disable that and manually route everything like I wanted to. Instead of calling to ButterCMS when loading a blog post page, I told react-static to call to butter to get ALL my blog posts, then constructed a route for each one.

React-static isn't perfect, though the biggest hurdle is documentation. The docs are somewhat barebones, and there are some things missing like how to use the public folder. I've also run into issues with emotion and react-static where dynamic css would sort of get stuck and not change on render (For example, set this site to use its light theme. Refresh the page, and note that the toggle switch appears as if dark theme is selected. No idea how to fix it!) Still, these issues are well worth the huge increase in responsiveness. The site loads nearly instantly now and there's no load time between pages as everything is prefetched.

Netlify

This all presents a problem though. Using create-react-app and calling ButterCMS on every page load, the blog was always up to date, but now data is fetched on build. If I write a new blog post, I'll need to re-run the build and redeploy. There just isn't a great way to automate this with GitHub Pages. So, I found Netlify.

Oh Netlify, where have you been all my life. For free, I can deploy a main branch as well as multiple preview branches, use custom domains, and automatically set up SSL. Oh, and the app builds on Netlify's server, not my machine, and is triggered by pushes to my master branch. And did I mention it supports webhooks, like for the publish event on ButterCMS?

Seriously, I'll never recommend GitHub Pages again. No more hacks to get multiple deploys (as described here), it just works.

Previous: Dragon of Icespire Peak - Campaign Diary 1

Next: Dragon of Icespire Peak - Campaign Diary 2