Big fan of static site generators and the whole JAMStack idea in general - I use Jekyll extensively - but after building a site with Gatsby, I found it too over-engineered.
React is great, and definitely has its place, but to set up React, GraphQL and all the surrounding tooling just to assemble some text files into a template seems like complexity for the sake of it.
For me, the fun of static sites - after years of building sites with CMSs like Wordpress and Drupal - is that they’re as close as possible to plain HTML, lightning-fast and very simple.
I switched my personal Jekyll site to Gatsby 2 years ago. I ran into some minor bugs and even contributed 3 PRs that got merged. I loved working with it for a few weeks. Two months after switching, it too dawned on me how over-engineered it is. I switched off of it to a custom static site generator I made (admittedly it was also over-engineered), but I'm finally back to a simple static generator called zola [1] and it feels so refreshing.
Not only is Gatsby over-engineered, it's also bloated IMO. I think one of their main selling points it that page loads seem instant. Preloading other pages in the background seems needless to me when we're talking about a simple blog. Sure, it might be good for apps, but forcing my (few) visitors to download needless mbs on desktop or mobile seems like a bad user experience to me.
I like the look of Zola, and I bookmarked it when I saw the README pick a bone with Hugo's templating engine. Take a look at the Hugo Discourse forum and I can't imagine less than 99% of the topics are about Go/Hugo templating issues. The Hugo docs basically say "we use Go's template engine, go learn that confusing shit and then we'll tell you 5 different deprecated ways to get today's date if you are enough of a masochist."
Gatsby and Next.js are both site frameworks powered by React. They can both be used for static and dynamic sites with different conventions and features around routing, data management, and general app architecture.
Both are "hip" and will likely remain as the top 2 javascript based site frameworks for now, although whether you need either of them is an entirely different question.
TLDR: I just completed a large project built with Gatsby, and wouldn't recommend it to anyone. The technology is extremely complicated, and the end result quite inflexible.
Here's an idea of how the whole thing works when you have non-technical users:
1. You need some sort of Content Management System for non-technical users to be able to create content.
2. That CMS stores the content however it sees fit (db/files/whatnot) and provides an API to fetch it.
3. In gatsby, you build "source plugins" that fetch the content and fill it in an in-memory GraphQL sever.
4. Building the site entails fetching all content, feeding it to GraphQL, making a webpack build to run in nodejs, making a webpack build to run on the final site, and finally generating the HTML files.
If this doesn't sound so bad, here are some complaints in no particular order:
- There are no incremental builds. You must rebuild everything every time you want to publish a change. Our builds currently clock in at ~8min.
They've been saying they want incremental builds since 2 years ago. They are "just around the corner" since ~6 months ago. They "already did the hard part" ~4 months ago. They "will offer incremental builds sometime in the future but only in the cloud paid-for version" as of ~1 month ago.
- Users hate not being able to immediately see how their content will look like (especially if every time they publish there's a ~10min. delay to actually being able to see it). We had to setup a "preview" environment that is running gatsby in development mode. Gatsby the company just recently started selling this as a paid cloud service (we built it ourselves).
- Development mode does not serve html files like production builds do. The site behaves differently in that mode, and some issues only happen in actual builds. When you encounter one such issue, the feedback loop becomes "full build for every change" == ~10min of waiting to try every single change. This is a HUGE productivity killer.
- Gatsby generates html files. Then it hydrates that html in the client, using ReactDOM.hydrate. Sounds cool, but the React devs explicitly stated that prerendered content must match exactly what the client-side would render, and if it doesn't your site may completely break and it won't be considered a rehydration bug.
Now consider what happens if you try to use a component that changes appearance by doing size detection, or if you have some area that changes between "Hello <user>" or "log in" depending on whether the client is logged in, etc. BTW, these bugs only happen when you test actual builds, not in development mode of course (massive waste of time as per the point above).
- Gatsby hijacks NODE_ENV (setting it to "production" for actual builds and "development" for the development mode). This leaks into the many tools involved in the many things that happen while building (babel, webpack and all of their plugins, times two compilations, plus the rendering phase, etc). For instance, I've lost many hours trying to get a full, tree-shaken but unmangled build to no avail.
- Gatsby infers GraphQL types from the data you feed into it. It usually works, but when it doesn't it is painful to discover why (your queries return weird results) and fixing it means specifying your data types manually (something you already did once when you defined the database, again to define the models in the CMS, and yet again when you specified the API Gatsby uses to fetch the contents)
- Many months ago we went with CSS Modules because Gatsby sold it as a way to get the CSS required for each page inlined in the HTML itself. Fast-forward a bit, people where having issues with specificity (because of ordering) ... and now Gatsby inlines ALL of the site's css in each and every page. Our html's usually have more inlined CSS than actual HTML!
I can assure you I'm going the next.js route if I ever have to build a site with similar technology.
> Development mode does not serve html files like production builds do. The site behaves differently in that mode, and some issues only happen in actual builds. When you encounter one such issue, the feedback loop becomes "full build for every change" == ~10min of waiting to try every single change. This is a HUGE productivity killer.
This got me so many times. I was frustrated enough that I set up a headless chrome prerenderer to snapshot my gatsby-built site before every single deploy just so I could verify the html diff to make sure my site looked correct still.
The trust issues alone were enough to make me switch off of it.
"now Gatsby inlines ALL of the site's css in each and every page"
Did this abruptly happen at some point? I've had attempts to migrate components from old repositories cause similar issues and all I could see is that something with the dependencies of that project (e.g. "tree-model" definitely seemed to cause issues) were forcing gatsby to be overly safe in terms of culling CSS.
Similarly we had issues with imports a component library, but upon inspecting other projects the same issue was happen with client side rendered apps, so it was down to how we built the library rather than Gatsby.
My experiences were pretty positive but I did encounter every issue you've listed and would probably try next.js next time just to know what I've been missing. Have you worked with it before doing similar stuff?
-------------
As far as Gatsby goes I think it occupies a definite niche but one that needs to communicated very effectively. You get:
- static web pages
- react ecosystem (very useful if all other company frontends are on react and there's a design system)
- some webapp functionality
The last one being key, more than _some_ and it's probably going to start becoming a headache juggling all the pieces.
> "now Gatsby inlines ALL of the site's css in each and every page" Did this abruptly happen at some point?
It happened in gatsby @2.1.3 (a minor "patch" release!) [1]
> would probably try next.js next time just to know what I've been missing. Have you worked with it before doing similar stuff?
Not at the same scale. However, just reading their docs gives me way more confidence in that they are explicit about what the thing does or doesn't do. For instance, they can do prerendering like gatsby but there are many warnings about it in the docs [2], and you can always fall back to per-request SSR on any page if prerendering doesn't work there.
Also it does away with the whole graphql thingy (you just get a `fetch` that works both server-side and client-side) and call the "backend" api directly.
> Users hate not being able to immediately see how their content will look like
Shameless plug: I'm building a product that does what Gatsby Preview does, except it's platform agnostic, and ties in tighter wth the feedback/review process. https://featurepeek.com
I'm one of the use cases that Sam mentions - B2C website. Replatforming our site with Gatsby, Netlify (hosting and more) and Contentful (headless CMS) has saved us hundreds of dollars a month in hosting - our site which receives 20,000 - 30,000 visitors a month now costs $0 to host. Additionally it is radically faster and more secure than it previously was. Being able to use React as needed has enabled us to manage some relatively complicated form handling/routing, get really creative around how we handle 'sites within the site' for a large sales team that we support, and easily create calculators and other tools for our customers.
And bonus - I'm a graphic designer by trade. For one reason or another a web team of 7+ people left my company over the course of 6months and I stepped in to fill the void. Just me, one person who had prior experience building the odd site (maybe one a year) with HTML, CSS. I literally learned javascript and React through Gatsby (I'd say I'm junior developer level at this point - which is actually a good fit for my company).
Gatsby is a great product (for many use cases), run by a generous team, surrounded by an equally generous community. I owe my career to Gatsby. My company is saving hundreds of thousands of dollars a year thanks to Gatsby. Stoked to see Gatsby's continued growth and success.
Am I more convincing, with a six year old account?
I'm the exact target market for Gatsby, and can confirm the benefits that GP gave. Perhaps I can tell you how I've been selling it to my clients. I work at an agency, which builds sites in the ~$100k range. Most of our clients are currently using something like Drupal, or an ancient proprietary CMS. The RFPs now often specify Drupal "or other open source CMS". We're now offering them Gatsby + headless Drupal, and it gives them some significant benefits. These are sites that are currently paying thousands per month on multiple load-balanced Drupal servers, or managed hosts like Acquila. Gatsby lets them switch to a single Drupal instance on something like Lightsail, firewalled to give access to just their admins. Gatsby can then build the site (using CodeBuild or Amplify) and deploy to S3, so their hosting fees are then tens of dollars in CloudFront egress plus Lightsail. They also don't need 24x7 Drupal support, because it doesn't matter if the server ges down in the middle of the night, because their site stays up, and they don't need instant Drupalgeddon patching because their server isn't public-accessible.
I think the classic JAMStack/Markdown features of Gatsby are a red herring. I love them for my own site, but no client will use them (even with Netlify CMS, unfortunately). However it gets developers like me to try it out, and hopefully realise the benefits that it can offer.
My biggest concern with Gatsby is the build time. Drupal is not exactly known for being fast, and as I understand it, Gatsby asks for the entire site's worth of content for every build, right? How has that worked out for you?
I have Drupal sites with dozens of entity types and tens of thousands of nodes. I feel like Gatsby would have us waiting for an hour-long build every time we want to post a new node.
I definitely understand the disbelief, but this is the truth. I started visiting hacker news to try to familiarize myself with the tech world, learn new jargon, blah blah blah, and have always just lurked. I think so highly of Gatsby that I finally created an account just to say so.
Like I said, I come from a graphic design background. Mostly freelancing and working for different organizations that just needed an in house guy to do a little bit of everything. Low pay stuff in non-tech organizations - literally a small boutique in one case where I also managed retail workers. I never really got a good career off the ground for many reasons, one of which was probably the "great recession". Not a ton of demand for mediocre graphic designers who aren't very career oriented to begin with.
Probably around 4 years ago I got it in my head that maybe I could learn to build websites and either get a side hustle going or work my way into it. I did online courses, videos, etc., but never had the money or guts to jump into a code camp or something more legit, and honestly nothing really stuck.
Started a new graphic design gig around 3 years ago. The company was in Real Estate. Like I said - large sales team that really needs their own mini-sites within a site as the service we provide is really driven by their personal brands and relationships. As a designer on a small design team I mostly produced print ads for the sales folks - we were like a mini agency and a way of recruiting top talent. A strong corporate brand / web presence hasn't been necessary to create a successful company of just under 1000 employees, although everyone involves knows that it would only help the business. Pretty shortly into my time there I watched the web team (this includes a project manager, front end developer, ui/ux designer, 3 person SEO/analytics team, a content/data entry person, a middle manager for all of them, and some resources from the IT department) fall apart. That group wasn't really producing much - they refused to even build landing pages, didn't do any kind of SEM, etc. This is for a variety of reasons many of them political. Maybe this entire environment seems a little crazy, but I think this is far more common in many industries than people involved in tech might realize.
At some point an agency was brought in to manage the web presence, but they were very obviously neglecting our site. Managers in my department knew I had done some web in the past and used me to run around the agency. The agency kind of knew it, and even had me do stuff on their behalf - I didn't care it beat designing ads for local newsletters, and mailers. A really generous javascript developer at the agency mentioned Gatsby to me once, saying that he wanted to build everything on it, including the next iteration of our website. I could see the writing on the wall, so I decided to learn it thinking(hoping) that I might have to maintain a Gatsby site one day. I think 1.0 had just been released at that point. Not long after, they were fired and I was left holding the ball.
The site I inherited was built on wordpress. Because of the neglect it was many versions out of date, and rotting the way wordpress sites can when they aren't maintained. I did what I could to hold it together and doubled down on learning Gatsby and React. When I started replatforming our website it was a lot of false starts, I played with Hugo, headless wordpress in Gatsby, all kinds of schemes - honestly figuring it out as I went along. Eventually stuff started coming together. Each feature I was forced to build (was making an exact duplicate of the wordpress site) forced me to learn more about the toolset that was organically coming together - gatsby (which includes react and graphql), netlify, contentful, mailgun (remember that complicated form routing/logic), and more. I asked the IT dept, what the wordpress instance for our og site was costing us and learned it was $500+ a month. I did everything I could to keep us in Contentful and Netlify free tiers and have done so. We do pay $15/month for a service that does some form routing/templating magic for us - but that's the only cost these days.
In the end it took me around 6months to do something that would have taken an agency a month to fulfill. But, I also helped on a lot of random projects (it's amazing what people will let you be a part of when you are eager), and served as webmaster for the first site. During that time leadership at my company wasn't really ready to think about web, so in the end I have provided a great value - a huge cost savings for them over what they were spending and even what they otherwise would be today. I think a lot of people here would cringe to look at my code. It looks like what was written by who it was - someone learning as they went. But, nothing ever breaks, site hasn't been down once since replatforming and moving to netlify, site traffic has increased, we finally pass security audits, page load time went from 8seconds average to somewhere around 1-2 seconds on average. I spin up landing pages regularly, and have plans for meeting unique industry needs in a way that is doable and maintainable by just me.
At the end of the day I'm a novice who's making it work on my end mostly by force of will in an industry where a web presence is only just starting to matter. BUT none of it would be doable without Gatsby. Their community, documentation, and product are all amazing. I'm convinced that if my story didn't include Gatsby I wouldn't be provided the opportunities I currently.
If you want to be cynical you can interpret all of that as 'guy at shitty company, in shitty industry, where web really doesn't matter, uses Gatsby to make site that just works, and saves a marginal amount of money that definitely had to be spent (hosting costs) and a large amount of money that probably shouldn't have ever been spent (bloated web team and agency that sat on their asses).'
from not enough detail to waaaaaaayyyyyyyyyy too much
To be fair:
There are lots of options for a headless cms - I'm extremely confident that I could easily move my data to another free or super cheap service - even back to a free wordpress site if need be (to use as headless cms).
Also lots of extremely cheap options for free or very cheap hosting of static sites. That would also be an incredibly easy move to make.
Not trying to fanboy
Not saying gatsby is right for every use case and every developer
Am saying that it makes a lot of sense for my specific use case and probably for a lot of this agency and old-school-business-website style work. I suspect it is a very large market that provides decent livelihoods for many millenials that skated, snowboarded, surfed, or played in bands as young adults (kind of serious)
I just wanted to share that as an personal experience that people can weigh against other viewpoints.
It's tough to take this too seriously since it seems you created this name just to make this comment. What approaches did you try before 'owing your career to gatsby'?
Consider that the downside of your being wrong is that you drive a newcomer away from this community. That's surely not what you want, and definitely the opposite of what this place is for.
check out my reply above - the owing my career to gatsby is very much about my specific story - a story that is probably very different from most hackernews contributors but maybe some aspects of it are more common for the lurkers here, of which I am one.
I would honestly be interested to know how many self taught people making things work building basic sites for unglamorous corners of the internet cruise this site.
To be honest I don't really feel welcome here because I'm not sophisticated (prob the best word for it) enough. But that's ok.
I run Hacker News. We're not interested in sophisticated; we're here for curiosity. If have that, which I'm sure you do, then you're welcome here, so please don't let a single comment make you feel otherwise.
It's not for the sake of it. It's so Gatsby didn't have to achieve much beyond wrapping some complicated frameworks to be useful. Basically, about 5 minutes into setting up Gatbsy, you go "Oh, so it's just React and GraphQL. Ok..."
When I pitch my boss on Next.js s/he will ask how confident I am that Zeit is going to remain a profitable concern subsidizing active development for years to come.
React is great, and definitely has its place, but to set up React, GraphQL and all the surrounding tooling just to assemble some text files into a template seems like complexity for the sake of it.
For me, the fun of static sites - after years of building sites with CMSs like Wordpress and Drupal - is that they’re as close as possible to plain HTML, lightning-fast and very simple.