A enjoyable truth about me is that my birthday is on Valentine’s Day. This yr, I wished to rejoice by launching a easy web site that lets folks obtain nameless letters by means of a private hyperlink. The thought got here as much as me firstly of February, so I wished to complete the mission as quickly as potential since time was of the essence.
Having that in thoughts, I made a decision to not do SSR/SSG with Gatsby for the mission however somewhat go along with a single-page utility (SPA) utilizing Vite and React — a somewhat laborious resolution contemplating my in depth expertise with Gatsby. Years in the past, after I began utilizing React and studying an increasing number of about at present’s intricate net panorama, I picked up Gatsby.js as my render framework of selection as a result of SSR/SSG was obligatory for each web site, proper?
I used it for all the things, from probably the most fundamental web site to probably the most over-engineered mission. I completely cherished it and thought it was the perfect software, and I used to be extremely assured in my resolution since I used to be getting good Lighthouse scores within the course of.
The years handed, and I discovered myself continuously combating with Gatsby plugins, resorting to hacky options for them and even spending extra time ready for the server to start out. It felt like I used to be fixing greater than making. I even began a sequence for this journal all concerning the “Gatsby complications” I skilled most and how one can overcome them.
It was like Gatsby acquired harder to make use of with time due to a number of unaddressed points: outdated dependencies, chilly begins, sluggish builds, and off plugins, to call a couple of. Beginning a Gatsby mission grew to become tedious for me, and excellent Lighthouse scores couldn’t make up for that.
So, I’ve determined to cease utilizing Gatsby as my go-to framework.
To my shock, the Vite + React mixture I discussed earlier turned out to be much more environment friendly than I anticipated whereas sustaining nearly the identical nice efficiency measures as Gatsby. It’s a tough conclusion to abdomen after years of Gatsby’s loyalty.
I imply, I nonetheless suppose Gatsby is extraordinarily helpful for loads of tasks, and I plan on speaking about these in a bit. However Gatsby has undergone a sequence of current unlucky occasions after Netlify acquired it, the impacts of which could be seen in down-trending outcomes from the latest State of JavaScript survey. The probability of a developer choosing up Gatsby once more after utilizing it for different tasks plummeted from 89% to a meager 38% between 2019 and 2022 alone.
Though Gatsby was nonetheless the second most-used rendering framework as lately as 2022 — we’re nonetheless anticipating outcomes from the 2023 survey — my prediction is that the decline will proceed and dip effectively beneath 38%.
Seeing as that is my private farewell to Gatsby, I wished to write down about the place, in my view, it went mistaken, the place it’s nonetheless helpful, and the way I’m dealing with my future tasks.
Gatsby: A Retrospective
Kyle Mathews began engaged on what would finally turn into Gatsby in late 2015. Due to its distinctive information layer and SSG method, it was hyped for achievement and achieved a $3.8 million funding seed spherical in 2018. Regardless of preliminary doubts, Gatsby remained steadfast in its dedication and have become a frontrunner within the Jamstack neighborhood by persistently enhancing its open-source framework and bringing new and higher modifications with every model.
So… the place did all of it go mistaken?
I’d say it was the introduction of Gatsby Cloud in 2019, as Gatsby aimed toward producing steady income and solidifying its enterprise mannequin. Many (myself included) pinpoint Gatsby’s downfall to Gatsby Cloud, as it will find yourself slicing assets from the primary framework and even making it tougher to host in different cloud suppliers.
The core framework had been optimized in a approach that utilizing Gatsby and Gatsby Cloud collectively required no further internet hosting configurations, which, as a consequence, made deployments in different platforms far more tough, each by neglecting to supply documentation for third-party deployments and by releasing unique options, like incremental builds, that have been solely accessible to Gatsby customers who had dedicated to utilizing Gatsby Cloud. In brief, internet hosting tasks on something however Gatsby Cloud felt like a penalty.
As a framework, Gatsby misplaced customers to Subsequent.js, as proven in each surveys and npm developments, whereas Gatsby Cloud struggled to compete with the likes of Vercel and Netlify; the previous buying Gatsby in February of 2023.
“It [was] clear after some time that [Gatsby] weren’t successful the framework battle in opposition to Vercel, as a common function framework […] They usually have been most likely a bit boxed in by us when it comes to constructing a cloud platform.”
— Matt Biilmann, Netlify CEO
The Netlify acquisition was the final straw in an already tumbling framework haystack. The migration from Gatsby Cloud to Netlify wasn’t fairly for patrons both; some groups have been charged 120% extra — or had incurred extraneous charges — after changing from Gatsby Cloud to Netlify, even with the identical Gatsby Cloud plan that they had! Many key Gatsby Cloud options, particularly incremental builds that diminished construct instances of small modifications from minutes to seconds, have been merely now not accessible in Netlify, regardless of Kyle Mathews saying they might be ported over to Netlify:
“Many efficiency improvements particularly for big, content-heavy web sites, preview, and collaboration workflows, can be integrated into the Netlify platform and, the place related, made accessible throughout frameworks.”
— Kyle Mathews
Nonetheless, in a Netlify discussion board thread dated August 2023, a mere six months after the acquisition, a Netlify help engineer contradicted Mathews’s assertion, saying there have been no plans so as to add incremental options in Netlify.
That left no important cause to stay with Gatsby. And I feel this touch upon the identical thread completely sums up the neighborhood’s collective sentiment:
“Yikes. Large blow to Gatsby Cloud clients. The incremental construct velocity was precisely why we switched from Netlify to Gatsby Cloud within the first place. It’s actually unlucky to be pressured emigrate whereas concurrently introducing an enormous regression in efficiency and expertise.”
Netlify’s acquisition additionally led to a firm restructuring that considerably diminished the headcount of Gatsby’s engineering staff, adopted by a whole cease in commit actions. A report in an ominous tweet by Astro co-founder Fred Scott additional exacerbated considerations about Gatsby’s future.
Lennart Jörgens, former full-stack developer at Gatsby and Netlify, replied, insinuating there was just one particular person left after the layoffs:
You’ll be able to see all these elements contributing to Gatsby’s utilization downfall within the 2023 Stack Overflow survey.
Biilmann addressed the neighborhood’s considerations about Gatsby’s viability in an open situation from the Gatsby repository:
“Whereas we don’t plan for Gatsby to be the place the primary innovation within the framework ecosystem takes place, it is going to be a secure, strong and dependable option to construct manufacturing high quality web sites and e-commerce shops, and can achieve new powers by methods of nice complementary instruments.”
— Matt Biilmann
He additionally make clear Gatsby’s future focus:
“First, guarantee stability, predictability, and good efficiency.
Second, give it new powers by robust integration with all new tooling that we add to our Composable Internet Platform (for extra on what’s all that, you may take a look at our homepage).
Third, make Gatsby extra open by decoupling some elements of it that have been intently tied to proprietary cloud infrastructure. The already-released Adapters function is a part of that effort.”
— Matt Biilmann
So, Gatsby gave up competing in opposition to Subsequent.js on innovation, and as an alternative, it’ll concentrate on retaining the prevailing framework clear and regular in its present state. Frankly, this looks like probably the most affordable plan of action contemplating at present’s state of affairs.
Why Did Folks Cease Utilizing Gatsby?
Sure, Gatsby Cloud ended abruptly, however as a framework unbiased of its cloud supplier, different elements inspired builders to search for options to Gatsby.
So far as I’m involved, Gatsby’s developer expertise (DX) grew to become extra of a burden than a assist, and there are two predominant culprits the place I lay the blame: dependency hell and sluggish bundling instances.
Dependency Hell
Go forward and begin a brand new Gatsby mission:
gatsby new
After ready a few minutes you’re going to get your model new Gatsby web site. You’d rightly anticipate to have a clear slate with zero vulnerabilities and outdated dependencies with this out-of-the-box setup, however right here’s what you will see that within the terminal when you run npm audit:
18 vulnerabilities (11 average, 6 excessive, 1 important)
That appears regarding — and it’s — not a lot from a safety perspective however as a sign of decaying DX. As a static web site generator (SSG), Gatsby will, unsurprisingly, ship a static and secure web site that (usually) doesn’t have entry to a database or server, making it resistant to most cyber assaults. Apart from, a number of these vulnerabilities are within the developer instruments and by no means attain the tip person. Alas, counting on npm audit to evaluate your web site safety is a naive selection at finest.
Nonetheless, these vulnerabilities reveal an underlying situation: the whopping variety of dependencies Gatsby makes use of is 168(!) on the time I’m scripting this. For the sake of comparability, Subsequent.js makes use of 16 dependencies. Plenty of Gatsby’s dependencies are outdated, therefore the warnings, however attempting to replace them to their newest variations will probably unleash a dependency hell filled with further npm warnings and errors.
In a associated subreddit from 2022, a person requested, “Is it potential to have a Gatsby web site with out vulnerabilities?”
The true reply is disappointing, however as of March 2024, it stays true.
A Gatsby web site ought to work utterly high-quality, even with that many dependencies, and increasing your mission shouldn’t be an issue, whether or not by means of its plugin ecosystem or different packages. Nonetheless, when attempting to improve any current dependency you will see that that you may’t! Or at the least you may’t do it with out introducing breaking modifications to one of many 168 dependencies, a lot of which depend on outdated variations of different libraries that additionally can’t be up to date.
It’s that inception-like roundabout of dependencies that I name dependency hell.
Sluggish Construct And Improvement Occasions
To me, one of the crucial essential elements of selecting a improvement software is how comfy it feels to make use of it and how briskly it’s to get a mission up and working. As I’ve mentioned earlier than, customers don’t care or know what a “tech stack” is or what framework is in use; they need a handsome web site that helps them obtain the duty they got here for. Many builders don’t even query what tech stack is used on every web site they go to; at the least, I hope not.
With that in thoughts, selecting a framework boils right down to how effectively you need to use it. In case your improvement server continuously experiences chilly begins and crashes and is unable to rapidly replicate modifications, that’s a poor DX and a sign that there could also be a greater choice.
That’s the primary cause I gained’t robotically attain for Gatsby from right here on out. Set up is now not a trivial process; the dependencies are firing off warnings, and it takes the event server upwards of 30 seconds besides. I’ve even discovered that the longer the server runs, the slower it will get; this occurs continuously to me, although I admittedly haven’t heard related gripes from different builders. Regardless, I get infuriated having to continuously restart my improvement server each time I make a change to gatsby-config.js, gatsby-node.js recordsdata, or some other information supply.
This new actuality is especially painful, understanding {that a} Vite.js + React setup can begin a server inside 500ms because of the usage of esbuild.
Operating gatsby construct will get worse. Construct instances for bigger tasks usually take some variety of minutes, which is comprehensible after we think about all the pages, information sources, and optimizations Gatsby does behind the scenes. Nonetheless, even a small content material edit to a web page triggers a full construct and deployment course of, and the countless ready isn’t solely exhausting however downright distracting for getting issues carried out. That’s what incremental builds have been designed to resolve and the rationale many individuals switched from Netlify to Gatsby Cloud when utilizing Gatsby. It’s a disgrace we now not have that as an accessible choice.
The second Gatsby Cloud was discontinued together with incremental builds, the incentives for persevering with to make use of Gatsby grew to become just about non-existent. The sluggish construct instances are just too expensive to the event workflow.
What Gatsby Did Awesomely Nicely
I nonetheless imagine that Gatsby has superior issues that different rendering frameworks don’t, and that’s why I’ll maintain utilizing it, albeit for particular instances, reminiscent of my private web site. It simply isn’t my go-to framework for all the things, primarily as a result of Gatsby (and the Jamstack) wasn’t meant for each mission, even when Gatsby was marketed as a general-purpose framework.
Right here’s the place I see Gatsby nonetheless main the competitors:
The GraphQL information layer.
In Gatsby, all of the configured information is obtainable in the identical place, a information layer that’s simple to entry utilizing GraphQL queries in any a part of your mission. That is by far the perfect Gatsby function, and it trivializes the method of constructing static pages from information, e.g., a weblog from a content material administration system API or documentation from Markdown recordsdata.
Shopper efficiency.
Whereas Gatsby’s developer expertise is questionable, I imagine it delivers among the finest person experiences for navigating a web site. Static pages and belongings ship the quickest potential load instances, and utilizing React Router with pre-rendering of proximate hyperlinks affords one of many smoothest experiences navigating between pages. We even have to notice Gatsby’s superb picture API, which optimizes pictures to all extents.
The plugin ecosystem (kinda).
There’s usually a Gatsby plugin for all the things. That is superior when utilizing a CMS as a knowledge supply since you may simply set up its particular plugin and have all the required information in your information layer. Nonetheless, lots of plugins went unmaintained and grew outdated, introducing unsolvable dependency points that include dependency hell.
I briefly glossed over the great elements of Gatsby in distinction to the unhealthy elements. Does that imply that Gatsby has extra unhealthy elements? Completely not; you simply gained’t discover the unhealthy elements in any documentation. The unhealthy elements additionally aren’t deal breakers in isolation, however they snowball right into a tedious and prolonged developer expertise that pushes away its advocates to different options or rendering frameworks.
Do We Want SSR/SSG For Every little thing?
I’ll go on file saying that I’m not changing Gatsby with one other rendering framework, like Subsequent.js or Remix, however simply avoiding them altogether. I’ve discovered they aren’t really wanted in lots of instances.
Assume, why can we use any kind of rendering framework within the first place? I’d say it’s for 2 predominant causes: crawling bots and preliminary loading time.
web optimization And Crawling Bots
Most React apps begin with a hole physique, solely having an empty <div> alongside <script> tags. The JavaScript code then runs within the browser, the place React creates the Digital DOM and injects the rendered person interface into the browser.
Over sluggish networks, customers could discover a white display screen earlier than the web page is definitely rendered, which is simply mildly annoying at finest (however devastating at worst).
Nonetheless, search engines like google and yahoo like Google and Bing deploy bots that solely see an empty web page and determine to not crawl the content material. Or, in case you are linking up a submit on social media, you could not get OpenGraph advantages like a hyperlink preview.
<physique>
<div id=”root”></div>
<script kind=”module” src=”/src/predominant.tsx”></script>
</physique>
This was the case years in the past, making SSR/SSG obligatory for getting observed by Google bots. These days, Google can run JavaScript and render the content material to crawl your web site. Whereas utilizing SSR or SSG does make this course of sooner, not all bots can run JavaScript. It’s a tradeoff you may make for lots of tasks and one you may decrease in your cloud supplier by pre-rendering your content material.
Preliminary Loading Time
Pre-rendered pages load sooner since they ship static content material that relieves the browser from having to run costly JavaScript.
It’s particularly helpful when loading pages which are behind authentication; in a client-side rendered (CSR) web page, we would want to show a loading state whereas we test if the person is logged in, whereas an SSR web page can carry out the test on the server and ship again the proper static content material. I’ve discovered, nonetheless, that this trade-off is an uncompelling argument for utilizing a rendering framework over a CSR React app.
In any case, my SPA constructed on React + Vite.js gave me an ideal Lighthouse rating for the touchdown web page. Pages that fetch information behind authentication resulted in near-perfect Core Internet Vitals scores.
What Tasks Gatsby Is Nonetheless Good For
Gatsby and rendering frameworks are wonderful for programmatically creating pages from information and, particularly, for blogs, e-commerce, and documentation.
Don’t be dissatisfied, although, if it isn’t the appropriate software for each use case, as that’s akin to blaming a screwdriver for not being a very good hammer. It nonetheless has good makes use of, although fewer than it might attributable to all the explanations we mentioned earlier than.
However Gatsby continues to be a great tool. If you’re a Gatsby developer the primary cause you’d attain for it’s since you know Gatsby. Not utilizing it may be thought-about an alternative value in financial phrases:
“Alternative value is the worth of the next-best different when a call is made; it’s what’s given up.”
Think about a scholar who spends an hour and $30 attending a yoga class the night earlier than a deadline. The chance value encompasses the time that might have been devoted to finishing the mission and the $30 that might have been used for future bills.
As a Gatsby developer, I might begin a brand new mission utilizing one other rendering framework like Subsequent.js. Even when Subsequent.js has sooner server begins, I would want to consider my studying curve to make use of it as effectively as I do Gatsby. That’s why, for my newest mission, I made a decision to keep away from rendering frameworks altogether and use Vite.js + React — I wished to keep away from the chance value that comes with spending time studying how one can use an “unfamiliar” framework.
Conclusion
So, is Gatsby useless? In no way, or at the least I don’t suppose Netlify will let it go away any time quickly. The acquisition and subsequent modifications to Gatsby Cloud could have taken an enormous toll on the core framework, however Gatsby could be very a lot nonetheless respiration, even when the present sluggish commits pushed to the repo appear to be it’s barely alive or hibernating.
I’ll probably stick with Vite.js + React for my future endeavors and solely use rendering frameworks after I really want them. What are the tradeoffs? Sacrificing negligible web page efficiency in favor of a sooner and extra nice DX that maintains my sanity? I’ll take that deal every single day.
And, after all, that is my expertise as a long-time Gatsby loyalist. Your expertise is prone to differ, so the mileage of all the things I’m saying could differ relying in your background utilizing Gatsby by yourself tasks.
That’s why I’d love so that you can remark beneath: in case you see it in a different way, please inform me! Is your present expertise utilizing Gatsby completely different, higher, or worse than it was a yr in the past? What’s completely different to you, if something? It could be superior to get different views in right here, maybe from somebody who has been concerned in sustaining the framework.
Additional Studying On SmashingMag
Gatsby Complications And How To Treatment Them: i18n (Half 1)
Gatsby Complications And How To Treatment Them: i18n (Half 2)
Gatsby Complications: Working With Media (Half 1)
Gatsby Complications: Working With Media (Half 2)
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!