An Honest Review of Gatsby

This review nails it. It takes the matrix.org gatsby website 20 minutes to build currently, which is excruciating when trying to do quick fixes for blog content - you just sit there wondering what the graphql is actually doing and what it’s giving you :&#x2F;<p>edit: <a href="https:&#x2F;&#x2F;github.com&#x2F;matrix-org&#x2F;matrix.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;matrix-org&#x2F;matrix.org&#x2F;</a> if any indignant gatsby fans want to tell us what we’re doing wrong

If a static site generator put my images in the wrong place and required a gigantic JSON file to be loaded by the client for no reason I would not think twice to get rid of it.<p>There are literally hundreds of static site generators: <a href="https:&#x2F;&#x2F;www.staticgen.com" rel="nofollow">https:&#x2F;&#x2F;www.staticgen.com</a><p>Most of them should get markdown right too!

I wonder why it seems nobody wants to use Hugo. Smashing Magazine appears to be happy with it and they tooted about their experience with Hugo multiple times.<p>Instead, everyone chooses Gatsby, Next or another javascript based framework of this week.

After building a site with Gatsby, it feels like a prank to make the process of getting a bit of html and css on the page as complex as possible.<p>It’s like you’re not a heroic enough a developer if you haven’t wrestled three build pipelines and ten layers of abstraction before breakfast.

I migrated a couple of sites I look after from react-static (which is a nice, simple library but unfortunately had some fundamental issues that it sounded like we’re unlikely to be solved and gave the impression that it was struggling for maintainers e.g. <a href="https:&#x2F;&#x2F;github.com&#x2F;react-static&#x2F;react-static&#x2F;issues&#x2F;1203" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;react-static&#x2F;react-static&#x2F;issues&#x2F;1203</a>), one to Gatsby and the other to NextJS.<p>I agree largely with the findings described here - Gatsby felt quite slow and the GraphQL part feels like complexity overkill, for my use case I bypassed it using their createPage API but you lose out on eg the ability to reload a page’s data on the fly by doing so (from what I could work out - the documentation was a bit lacking in parts I found).<p>I was more impressed with NextJS, it feels generally more solid and easier to understand. It has a great preview feature where you can set a cookie and then the site will pull in data at request time rather than from the static site (perfect for CMS previews!) and build times seem alright - I haven’t had cause to look into speeding them up, which is a good sign.<p>Personally I’d go with NextJS in future based on my experience... that said, I’ve no idea if it would work well for their reasonably specialised use case!

Surprised they didn’t try Eleventy. I was just reading how a Mozilla team converted their extension documentation to it from Jekyll because it has support for Jekyll’s template language via a plugin.<p><a href="https:&#x2F;&#x2F;hacks.mozilla.org&#x2F;2020&#x2F;10&#x2F;to-eleventy-and-beyond&#x2F;" rel="nofollow">https:&#x2F;&#x2F;hacks.mozilla.org&#x2F;2020&#x2F;10&#x2F;to-eleventy-and-beyond&#x2F;</a>

Is it wrong to suggest and admit that I write on my blog in plain HTML? How often do people refactor their designs and links? In PyCharm, I can do Regex search&#x2F;replace and it gets the job done if I ever need to change the template (which hasn&#x27;t happened in last 4 years). Not a single minute spent on searching for the right framework, reading docs, setting it up, dockerizing the app, and perhaps even building CI&#x2F;CD for automatic deployment.<p>Simple is better IMO. Just calculate the ROI and time spent on it and in next 10 years how often you&#x27;ll be changing stuff in terms of template or links (Neither should change - Design is not fashion and links should be relative).<p>I also have complete 100% control over the page. I adapt it for a particular content if its got more pictures and less text for example. It&#x27;s so easy and beautiful. There is a kind of zen-like aspect to it.

The first complaint in this is review is that markdown isn&#x27;t rendered in custom MDX components, using this example:<p>``` &lt;Alert level=&quot;warning&quot; title=&quot;Note&quot;&gt; <i></i>PUT&#x2F;DELETE<i></i> methods only apply to updating&#x2F;deleting issues. Events in sentry are immutable and can only be deleted by deleting the whole issue. &lt;&#x2F;Alert&gt; ```<p>And goes on to shiw their ugly hack to make it work.<p>Well, markdown in custom MDX components is rendered. You only need to leave a line break to signal to the parser that this needs further processing. Like this:<p>``` &lt;Alert level=&quot;warning&quot; title=&quot;Note&quot;&gt;<p><pre><code> **PUT&#x2F;DELETE** methods only apply to updating&#x2F;deleting issues.</code></pre> Events in sentry are immutable and can only be deleted by deleting the whole issue.<p>&lt;&#x2F;Alert&gt; ```<p>Which I really don&#x27;t find to be a deal breaker.<p>I stopped reading after that because I was hoping for a somewhat more informed opinion.<p>From my experience, build time&#x2F;build complexity is Gatsby&#x27;s achilles heel. But I&#x27;ve built some stuff that looking back I don&#x27;t think I could have done without Gatsby, as I came yo it being new to React.<p>It&#x27;s simple enough on the surface and as you dif deeper, there&#x27;s plenty of knobs to turn.<p>My one wish is if they&#x27;d let you bypass image processing in the development environment. Apart from that, I can&#x27;t recommend it enough.

Advice on the &quot;A Broken DOM&quot; section: it sounds exactly like a hydration mismatch. Hydration is the process of React correlating existing DOM nodes from server-rendered HTML (SSR) with the initial render of the React app on the browser-side. (As opposed to what happens without SSR, which is almost always the app being rendered into an empty DOM node – no content exists yet.)<p>Satisfying hydration constraints is by far the hardest part of doing React server-side rendering. The basic requirement is: whatever HTML you rendered on the server, the initial render of the browser app MUST output that exact same DOM structure. Otherwise, it won&#x27;t be able to correlate them correctly, and will get confused about which DOM nodes to update. You can seriously mangle your entire page this way – but usually, it looks like nearby content stuck in the wrong place, or incorrect updates.<p>Some things that lead to hydration mismatches:<p>- Time-based rendering. Time passes between when the server rendered the HTML and the browser initializes the app. So any component using `new Date` to make decisions can potentially have a hydration mismatch.<p>- Randomization. Let&#x27;s say you wanna choose a random promo image to show. The `Math.random()` result is going to be different on the server and client.<p>- Anything involving browser APIs, like the browser window size, or checking `typeof window`, etc. The server has no access to this info, so it either needs to skip rendering that content, or fallback to a default.<p>Once in the browser, here&#x27;s the important part: you need the app&#x27;s components to make all the same rendering decisions that they made on the server, <i>on the first pass</i> specifically (when hydration occurs). Then, using the component lifecycle, you can make them update to take the latest client-side info into account.<p>In other words, it&#x27;s not enough to simply detect `typeof window` and render different content – you&#x27;re only &quot;allowed&quot; to render that different content <i>after</i> the app has done its initial mount.<p>The somewhat-reassuring aspect of all this is that it&#x27;s almost certainly your components at fault, not Gatsby or React, so it can always be fixed without too much effort. But it&#x27;s an annoying foot-gun to have to worry about nonetheless.

Yeah, that&#x27;s quite similar with my experience. The idea is really nice and when it works, it&#x27;s great. But debugging those GraphQL queries without any intellisense and writing monstrous config files eg gatsby-node.js makes me wish for something better.<p>I understand that because the API gets so complicated it&#x27;s better to use something flexible like GraphQL. But the magic breaks down too easily in places and then you end up trying to fix some really peculiar bug (I had one where you had to put blank .eslintrc to the root to prevent the linter from linting local linked npm libraries).<p>I think parts of Gatsby core should probably be rewritten or done in different language to make it faster. The compilation shouldn&#x27;t take that long. But I&#x27;m not sure what are the remedies for the other problems. Maybe if they focused really hard to simplify the library into its very basics, following the Unix philosophy, it could help with the creeping complexity headache that Gatsby brings.

Gatsby is a mountain of unnecessary complexity. I&#x27;ve built a few Gatsby sites that I&#x27;m still maintaining and I will never use Gatsby for a new project again.

I think alot of folks share this view. When we switched our marketing site over to Gatsby it was a godsend, but once we hit over 400 static pages on our site, the build times were killing us.<p>Our devs complained that even on local, building took forever, and because it had to refetch all of our WordPress CMS media library each time, sometimes it would just crash during build.<p>Also we grew the need for good SEO support for dynamically generated pages (of which we have thousands), and we had to write our own prerendering lambda function to handle bots (and embed tools) that couldnt run js on their own<p>After Next announced their support for static site generation and the release of next-serverless, we took the next three weeks to get our site ported over and haven&#x27;t looked back since.

The creator of Lektor (<a href="https:&#x2F;&#x2F;www.getlektor.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.getlektor.com&#x2F;</a>), aka @the_mitsuhiko, works for Sentry, and as I got from David Cramer himself over Twitter, Lektor is used for various secondary or internal websites at Sentry.<p>Has it been a contender for the rewrite of their documentation?<p>Shameless plug: I&#x27;m in the middle of a rewrite of my company&#x27;s website (<a href="https:&#x2F;&#x2F;abilian.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;abilian.com&#x2F;</a>) using Lektor myself. So far so good, for someone used to Python and Flask it&#x27;s the obvious choice for a static website generator.

Static site generators are a weird bunch. A vast majority of the projects never leave the beta phase and only a select few are relatively stable and regularly updated. That aside, the community aspect is even more vital in my experience. Unless you&#x27;re an expert and understand the inner workings of the project, you&#x27;re going to have to rely on documentation and community tutorials and starter projects.<p>I wouldn&#x27;t for example know if something is even possible to achieve with a project unless someone had a repository showcasing how it is done, which has made me wary of betting on anything too immature. I just don&#x27;t have the skills to bridge the gap myself.<p>Personally, I&#x27;ve stuck with Jekyll up to last year for these reasons, but right when COVID hit I started to delve into 11ty. I can say that it has been nothing short of a delight and the community is pretty stellar as well. I&#x27;m currently experiencing build times measured in milliseconds instead of minutes or so. I&#x27;ve been impressed and the project is developed actively and each update brings very concrete upgrades every time. Currently, I have the honor of sitting on top of the performance leaderboard for 11ty. Over half of the 400 sites there scores full marks in Google Lighthouse scores which should tell you something.

Gatsby is a great idea, with a questionable execution. Being able to build your entire site with React, make all of it statically rendered, and then opt into interactive&#x2F;dynamic parts as needed is really great. Pulling in data sources at build time can be excellent. Overall I like the ideas behind Gatsby a lot.<p>But with real websites, I struggled to get Gatsby to be performant both at build and runtime. Gatsby really wants to preload other pages on your site in an attempt to speed things up, and you can&#x27;t opt out of it. Whether this preloading is a benefit is a real mixed bag, and I have found myself spending a lot of time tweaking things to try and make it a net plus across the site. Mostly with bad results. gatsby-plugin-no-javascript can really improve things here a lot. It allows you to opt into JS only on pages that really need it, kill off the preloading entirely, and gain more control over the end result of your site. It&#x27;s very strange that to get something like Gatsby in the ballpark you want you need to strip out JS, but well, it&#x27;s true.<p>gatsby-plugin-no-javascript is not a perfect solution. It&#x27;s too coarse. But I have found overall it can be a net positive. What I really want is the ability to say &quot;this part of the page&#x2F;site&#x2F;whatever is truly static, please don&#x27;t rehydrate it at runtime&quot;.<p>Gatsby&#x27;s plugin system is nice. I like being able to handle things like robots.txt, sitemaps, favicons in a well defined, easily managed part of my app. The downside being you gotta accept what the plugin gives you. For example the favicon plugin generates favicons that are over 30kb. In my case, the favicon is often larger than the entire rest of the page combined. So I still find even here Gatsby is a good idea with questionable execution at times.<p>Gatsby has strict caching requirements -- <a href="https:&#x2F;&#x2F;www.gatsbyjs.com&#x2F;docs&#x2F;caching&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.gatsbyjs.com&#x2F;docs&#x2F;caching&#x2F;</a> -- and if you can&#x27;t meet them, your site will have subtle bugs. This means Gatsby is not compatible with Github Pages, and is a major downside to Gatsby.<p>This article spent a long time complaining about MDX. I agree, I think MDX is quite bad. But of the 4 complex Gatsby sites I have built, none of them used MDX. I don&#x27;t think it&#x27;s fair to conflate MDX&#x27;s short comings with Gatsby.<p>I&#x27;m currently playing with Svelte&#x27;s Sapper. It might possibly become what I always wished Gatsby was.

When I found gatsby, I immediately stripped everything out and hooked into the dynamic createPages so I could just give it a list of components to turn into pages. (I thought the graphQL parts were horribly bloated boilerplate, so I didn’t want to even touch it.)<p>It also works well with async import for runtime loading of components.<p>Other then that, I don’t use any of it’s features. (I found a markdown react on npm and manually move the images to the public folder and use normal image tags.)<p>I’m quite happy with the runtime results, and develop re-render works pretty quickly. However, the production build takes about 30 secs which is pretty slow and I also ran into “out of heap memory“ on node during build and had to increase node’s heap size.<p>So I’m sure I’ll end up needing to build my own SSR eventually, but it should be easy to do.

I tend to agree with a lot of this article, having done a fair few Gatsby sites. I&#x27;d love to ditch GraphQL entirely and use proper SQL. But keep in mind this is all build-time complications, and at the end of the day you have static data sourcing all your pages.

I&#x27;ve honestly found that the learning curve for Gatsby is too high. I&#x27;ve been using Next.js and I absolutely love it!

Not mentioned here, and rarely mentioned anywhere is marko.js as a good alternative. Its not static site generation, but it&#x27;s faster than most static site generated even though it processes templates on the server. The markup does not even need to learn: its pure JavaScript in the markup, it makes it so intuitive to create templates.

I do wonder: where was the point of no return? Maybe scrapping it and starting anew would have been better.<p>I wish the article mentioned that.

This mirrors my experience as well. Extremely slow build times, a lot of complexity that is hidden at first but is going to rear its head sooner or later, and GraphQL everywhere for very unclear reasons. Also, surprisingly easy to misconfigure something and get very poor TTI and other Lighthouse scores.

It&#x27;s amazing to me that there&#x27;s still not a super simple create react app option out there that builds a react app based on markdown sources for pages. You can get close to it with gatsby et al., but they&#x27;re all twiddly or fragile in their own ways.

Elder.js for Svelte looks like a great &quot;pure SSG&quot; alternative for larger SEO sites:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;Elderjs&#x2F;elderjs" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Elderjs&#x2F;elderjs</a>

I had a bad experience with Gatsby too. I am fond of the Gatsby-Image plugin for an image heavy website because it will generate all the images you need for responsive sizes, plus webp, plus a blurry preview.<p>The downside of this is that the lighthouse profiler currently does not score this setup properly and the blurry placeholder results in a lower score. There was an open bug to fix this last I checked.<p>The other major issue I faced was to setup netlify CMS for my own hosting. This ecosystem seems to very forcefully nudge you to use their infrastructure like Netlify or Gatsby cloud. I didn&#x27;t want that for a number of reasons. The documentation to set it up for your own server is in an absolutely pathetic state. All the steps described are cryptic and I ran across multiple questions and issues filed by confused users. I finally found a blog post which covered a large number of gotchas and I was able to set it up.<p>My customer manages the content on their site on their own. They were happy with the performance upgrade but the prospect of waiting a few minutes for the site to recompile everytime they make an update felt like a big step back to them.<p>I was not happy with seeing enormous json files being generated for what is essentially a website with a homepage and multiple categories with large photo galleries in them.<p>The other thing I was not prepared for is the hardware required to build the site. Small servers were running out of memory to do the build so I had to setup CircleCI to do the builds for me and then copy everything back to my server.<p>Another weird scenario I ran into was that the development version and build version had different outputs. I eventually solved this by noticing an issue with the DOM which didn&#x27;t get picked up by anything in the build tools. Took me a day or two to finally figure it out.<p>In hindsight I am now wondering if I should just roll my own image resizing scripts, switch to a crud web app and cache all the generated htmls on first load and delete the cache when a change is made and prime it. This has been my approach prior to Gatsby, but I was sold on their marketing about how I get all the speed benefits for free and not have to worry about sizing images, setting up webpack for performance and splitting for routes, setting up metatags for prefetching&#x2F;preloading etc. Turns out you&#x27;re better off doing all that on your own.<p>Broadly I probably wouldn&#x27;t use this framework again unless it was for a simple blog or something. The experience has left me quite annoyed. I am probably not going to follow this JAM stack philosophy in the future either. I don&#x27;t really see the benefit. Are people really that afraid of managing servers?<p>I am also considering redoing the entire site in Sinatra the next time I add features to it.

For those of us not familiar with these systems - can someone please link to something more introductory?<p>I literally thought this was an item about the Australian stand-up comic (but that&#x27;s Gadsby with a D).

The last time I had to work on a Gatsby project, it had build times of approximately nine hours.<p>Last thing I heard from them, is that when faced with the need to update news on the site more quickly (not on realtime, but &quot;sooner&quot;), the development team had to make a separate mechanism to query the news from the backend when the site was running on the browser, instead of doing it at build time, using the builtin GraphQL database. This defeats the central idea that everything on Gatsby comes from a central data source.

Gatsby build times are getting slower especially for images. Just started using Gatsby using a starter theme ( <a href="https:&#x2F;&#x2F;www.bobbydreamer.com" rel="nofollow">https:&#x2F;&#x2F;www.bobbydreamer.com</a> ). I am just imagining, if I continue to use this theme and add more posts and pictures for next 10 years. How slower can it become. Gatsby is fast and site starters are really sleaky. If builds are faster&#x2F;optimized, it can help.

&quot;Modern&quot; is a term that should be reserved for improvement and progress. Are Gatsby users experiencing net gains from the alleged modern tooling?

I wonder... If Jekyll worked better, wouldn&#x27;t have been better to just invest some time in learning enough ruby to make jekyll fit their needs?

&gt; gigabyte-sized Sentry frontend app<p>Mr. Nolan, please invert me, I have to fix an awful mistake called &quot;frontend frameworks&quot; back in time.

It&#x27;s an interesting experiment in switching between various frameworks but honestly, looking at the docs, they could just use WordPress.. but regardless of backend, I&#x27;m not sure I see a need for a React frontend here <a href="https:&#x2F;&#x2F;docs.sentry.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;docs.sentry.io&#x2F;</a>

I just wonder how much time had to be spent trying to get a static site generator to build quickly and correctly, and how much time it would have taken to deploy a CMS and a caching layer, or wire up a UI over a headless CMS.

&gt; approximately 0% of the engineering team knows Ruby<p>I found this surprising. I once worked somewhere that used Sentry heavily (liked it a great deal, it was pretty important to us). We had about a hundred projects and were encountering quota problems, the worst of which were usually from misbehaving queue workers on staging or perf the would consume our entire event budget if left unchecked. If we didn&#x27;t shut it off in time we&#x27;d end up losing meaningful prod events.<p>Our solution was to switch to a YAML based config for rate limits and per project quotas. This would ensure every project was capped, central prod services were allocated more events like they deserved, etc. Sentry staff sent us a helpful starter script for utilizing their project configuration REST API. It was written in Ruby.

Wes Bos released his &#x27;Master Gatsby&#x27; course a few days ago: <a href="https:&#x2F;&#x2F;mastergatsby.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;mastergatsby.com&#x2F;</a>

Gatsby was amazing for getting a landing page with a blog off the ground. It&#x27;s much less compelling as we expand what we want our landing page to do .

Serious question: Why generate a static site at all instead of running next.js behind a CDN? Now a publish is really just a publish instead of a rebuild.

Perl&#x27;s Template Toolkit has provided everything I&#x27;ve needed in a SSG for the last 20 years.

Thanks for the blog post. I thought about trying Gatsby out, but now I know to stay away from it.

&quot;gigabyte sized app&quot; WTF

Using gatsby is the worst choice I ever made, the build times are infuriatingly slow and GraphQL really is not a good fit for it.<p>The amount of time that you have to spend just fiddling with Gatsby is insane and then in the end it only barely works.<p>Their marketing keeps touting fast but I doubt there is something slower when you actually use it for something of consequence.

Argh, I thought this was a (potential) new take on &quot;The Great Gatsby&quot; but it turns out to be some web framework I haven&#x27;t heard of. Could we maybe name things so that tech things sound like they are tech?

All that useless effort for just some static pages. Can&#x27;t believe how much money, time and resources are wasted by these hipsters. Why don&#x27;t they solve actual problems that could help our race, instead of resume driven hipsterness.