For our company we rewrote our homepage using React. Choosing React was simple - it is one of our core technologies, it scales well, and we think that it allows creating great user experiences. It won a tech battle against pure static pages using Jekyll. Nevertheless, the ability to have static pages for non-JS users (or potentially some crawler) was still considered nice to have. Hence looking for a solution in that area seemed viable. We ended up with Gatsby.js, however, due to the reasons below we dropped the idea.
First of all, TypeScript was not really working. We require TypeScript for any of our projects. This should be no exception. Installing the official package then resolved the issue, but I was wondering why there was a plugin needed for this at all. It seems that for everything you’ll need a plugin - further development tools (e.g., SASS), packages (e.g., Leaflet), or settings. Not a nice experience.
When using the official TypeScript plugin I faced some other strange issues. The development experience was completely broken. Apparently, the system could not handle the (default?) exports. This had nothing to do with the tsconfig.json. Building the application worked, but that was not what I wanted at this point in time…
So I switched to a TypeScript plugin that really uses TypeScript under the hood (in fact it was using the ts-loader webpack plugin). Well, since Gatsby is using Webpack I should have known that all kinds of issues will be “normal”. Since the exact Webpack configuration is hidden it should also have been expected that resolving these issues will be impossible. Unfortunately.
With the ts-loader plugin I finally got a working version, however, I also hit some hard rocks there. Apparently, the solution was to have max. 1 import per line. Hence instead of using import { a, b } from 'c' I needed to fall back to two lines, such as import { a } from 'c'. Why the behavior of TypeScript changes/d I don’t know. Again the tsconfig did not seem to be fishy.
I developed the whole application quite fast - after all it was a working React application beforehand. Building it then ultimately failed with some strange errors. Here, I needed a workaround. I ended up with using the official TypeScript plugin for building, and the ts-loader for development. Is this a good setup? No. It is a pain. It also does not feel right.
Building the page with Gatsby takes 40+ seconds. Compared to the previous version using just Parcel with 3+ seconds we have a magnitude between the two solutions.
Overall, we will not use Gatsby for our site. The development and building experience was way too cumbersome. Using a couple of scripts during the build process is sufficient to get the level of site generation that we need. I agree that making static / progressive pages is most likely better with Gatsby, but our page was intended to be a JS-only page. We have no intention of changing that.