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.
For example, I had thought Gatsby was the hip way to create static sites in 2019. Then another comment here mentioned it’s Next.js now.
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.
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.
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.
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.
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.
[1] https://github.com/gatsbyjs/gatsby/issues/11072 [2] https://nextjs.org/docs#automatic-prerendering
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
If existing solutions are near perfect for you, you are not the target audience.
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.
Specially considering the stories from other people here, which include a lot more technical detail.
Also the other users are not new accounts with just one comment (unlike the user above).
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.
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.
If it's just a static landing page I think the Jamstack/Gatsby/Gridsome would be fine.
If it's anything more complex though, you have my condolences. Ecommerce honestly sucks for the reasons others have mentioned.
I've almost finished a Shopify build with Nuxt.js and there have been so many hard learnings.
The more painful one was storing checkoutIds using SSR and cookies. I still don't know if it's best practice or not :/
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
I'd also state, that is, for now. These services will have to make money at some point.
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.
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.
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.
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..."
Next.js is less opinionated.
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.