December 2, 2020

My Experience Switching to Gatsby, from Next.js

Just some quick thoughts on Gatsby and Next.js, after trying both for a project I worked on recently (this one). I’ve been a Next.js user for about a year, and for this project I tried to use Gatsby, with limited success.

Hot-reloading

Hot-reloading started out pretty shaky for me when I first tried Next.js about a year ago. But since 9.4 it’s been spot-on. Gatsby hot-reloading mostly worked well, although if there was an error, the page wouldn’t reload after fixing the code. Since errors happen all the time in development, it got pretty annoying to have to manually refresh after fixing every error.

Browser-dependent libraries

I picked superagent to make my API requests, only to find out before deploying the site, that Gatsby couldn’t build it. The issue was filed 3 years ago and open for less than 5 hours, but it’s still an issue today, and caused me to have to switch to axios. Getting hit with this only during the prod build was annoying. In contrast Next.js seems to meet my expectation that if dev builds, prod should build too.

Deploying

I deploy my Next.js projects using docker containers on a kubernetes cluster. Usually I can google for “ Dockerfile”, find an official one, copy and paste it, and things will work. Not so with Gatsby. Things seemed promising at first, I found this official docker image. It’s even a multi-stage build, which is neat (multi-stage builds result in much much smaller images). Unfortunately there’s an issue that’s been open since April, that the build fails on the first line.

It was at this point that I decided to cut my losses and move my project over to Next.js.