How to Pass Payment Processing Fees to Customers in WordPress

Recently, one of our readers asked us how they can pass payment processing fees to customers in WordPress.

Most payment processors charge additional fees to facilitate a secure transaction process for the buyer and seller. Asking customers to pay the payment processing fees helps you increase your earning by around 3%.

In this article, we will show you how to easily pass payment processing fees to customers in WordPress, step by step.

Pass Payment Processing Fees to Customers in WordPress

Why Pass Payment Processing Fees to Customers in WordPress?

If you have an online store, then you may have noticed that most payment processors charge you additional per-transaction fees, percentage-based fees, and gateway fees.

For instance, if a user buys a chair from your furniture store for $50 and uses Stripe as a payment method, then you will only get $48.55 in your account. This is because Stripe collects 2.9% + $0.30 per transaction.

Passing this processing fee to customers allows you to receive the entire amount ($50) for your product/service without having to worry about absorbing this fee as a business expense.

Plus, it gives you more control over your product pricing strategy.

It also helps build transparency with customers by adding a separate line for the fees on the checkout page, which can act as a competitive advantage. It will allow you to set lower base prices for your products and attract more customers who are looking for the lowest total cost.

Having said that, let’s see how to easily pass the payment processing fees to customers in WordPress. In this tutorial, we will cover three methods, and you can use the links below to jump to the one of your choice:

Method 1: Pass Payment Processing Fees to Customers With WP Simple Pay

WP Simple Pay is the best WordPress Stripe plugin on the market that allows you to accept payments from customers without adding a shopping cart. It comes with premade templates, has a form builder, and lets you add payment processing fees directly to the customer’s bill.

Plus, WP Simple Pay is a great choice if you have a membership site, sell courses online, or sell a single product in your online store.

First, you will need to install and activate the WP Simple Pay plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin.

Note: WP Simple Pay has a free plan. However, you will need to upgrade to the pro version to unlock the fee recovery feature.

Upon activation, a setup wizard will open up on your screen. Here, you must click the ‘Let’s Get Started’ button.

Installing the WP Simple Pay WordPress plugin

This will take you to the first step, where you have to add your plugin’s license key and click the ‘Activate and Continue’ button.

You will get this information from your account on the WP Simple Pay website.

You’ll Be Asked to Enter Your WP Simple Pay License Key

After that, you will need to connect your Stripe account with WordPress.

Go ahead and click the ‘Connect with Stripe’ button to continue.

Connecting your WordPress website to Stripe

Once you do that, you must log in to your Stripe account to connect it with WP Simple Pay and then configure the other setup wizard steps.

For detailed instructions, you can see our tutorial on how to create WordPress forms with payment options.

Now, you can start by visiting the WP Simple Pay » Add New page from the WordPress admin sidebar. This will direct you to the ‘Select a Template’ page where you can choose any template you like.

For this tutorial, we will be creating a simple payment form.

Use the payment form template by clicking the 'Use Template' button under it

The form builder will now open up on your screen. Here, you have to provide a name and description for the form that you are about to create.

Then, select ‘On-site payment form’ as the form type and switch to the ‘Payment’ tab.

Add a name for your form and switch to the Payment tab

Once you are there, scroll down to the ‘Price Options’ section and simply add an amount for your product or service. You can also pick if you want it to be a one-time or recurring payment.

If you want to add multiple prices, then you can click the ‘Add Price’ button at the top.

Add amount for your payment form

After that, scroll down to the ‘Payment Method’ section and check the boxes next to the gateways that you want to add to your payment form.

With WP Simple Pay, you can add KIarna, Affirm, AliPay, debit card, credit card, SEPA Debit, and many more methods.

Once you do that, click the ‘Configure’ link next to the payment option of your choice.

Choose a payment method by checking the box next to these options

This will open a prompt on the screen, where you have to check the ‘Add an additional fee to payments made with this payment method’ option. Once you do that, you can set a transaction fee percentage for the product that you are selling.

If you don’t configure this setting, then Stripe will automatically add 2.9% of the product price as the fee. Then, click the ‘Update’ button to store your settings.

Check the Fee recovery option

Now, the payment processing fee will automatically be added to the customer’s bill on the checkout page.

However, if you think that adding a recovery fee without customer consent can damage your reputation, then you can also provide a choice to your customer.

To do this, switch to the ‘Form Fields’ tab. Here, you can add, rearrange, or delete fields in the form according to your liking. For more information, you can see our tutorial on how to accept payments with Stripe in WordPress.

Once you do that, open the ‘Form Fields’ dropdown menu and select the ‘Fee Recovery Toggle’ option. Then, click the ‘Add’ button.

Now, users on your site will have to toggle this switch if they want to pay the payment processing fee themselves.

Add fee recovery toggle as payment form field

Next, switch to the ‘Payment Page’ tab and check the ‘Enable a dedicated payment page’ option.

After that, you can now customize your payment form page by adding a permalink, color scheme, image, and footer text.

Publish your payment form with purchase restriction

Once you are done, don’t forget to click the ‘Publish’ button at the top.

Now, simply visit your payment form page to view the fee recovery feature in action.

Payment form with fee recovery option

Method 2: Pass Payment Processing Fees to Customers With Easy Digital Downloads

If you sell digital products like eBooks, PDFs, music, or spreadsheets, then this method is for you.

Easy Digital Downloads is the best WordPress plugin for selling digital products that makes it super easy to pass processing fees to customers using an addon.

First, you will need to install and activate the Easy Digital Downloads plugin. For detailed instructions, see our beginner’s guide on how to install a WordPress plugin.

Note: EDD has a free plan. However, you need the pro version to unlock the ‘Gateway Fees’ extension.

Upon activation, head over to the Downloads » Settings page from the WordPress dashboard to enter your license key.

You can get this information from your account on the Easy Digital Downloads website.

Add a license key for your easy digital downloads plugin

After that, you must set up your store to start selling products. For detailed instructions, you can check out our beginner’s guide on how to sell digital downloads in WordPress.

Once you have done that, visit the Downloads » Extensions page from the WordPress admin sidebar and locate the ‘Gateway Fees’ extension.

Then, click the ‘Install’ button under it.

Install the EDD gateway fees extension

Upon addon activation, visit the Downloads » Settings » Payments page and switch to the ‘Gateway Fees’ tab.

Here, you can add the payment processing fee that you want to charge your customers next to the ‘Percent fee for Stripe’ or ‘Flat fee for Stripe’ options.

Once you do that, you can add a label that will be displayed on the checkout page to explain the additional fee being charged to the user.

You can configure the gateway for all the payment methods that you have added to your site from this page.

Configure the gateway fees

After that, don’t forget to click the ‘Save Changes’ button to store your settings.

You can now visit your WordPress site to view the additional payment processing fee on the checkout page.

Payment processing fee preview in EDD

Method 3: Pass Payment Processing Fees to Customers With WP Charitable

If you accept donations or do crowdfunding through your website, then this method is for you.

WP Charitable is a popular WordPress donation plugin that lets you create unlimited fundraising campaigns and comes with a Fee Relief extension to allow users to cover payment processing fees.

For this tutorial, you will need the WP Charitable Plus license to unlock this extension.

First, you will need to install and activate the core Charitable plugin, which is completely free. For detailed instructions, you can see our tutorial on how to install a WordPress plugin.

Next, visit the Charitable » Settings page from the WordPress dashboard to enter your pro plan’s license key and click the ‘Verify Key’ button.

You can find this information in your account on the WP Charitable website.

Add license key for WP Charitable

After that, head over to the Charitable » Addons page from the WordPress admin sidebar and find the ‘Charitable Fee Relief’ extension.

Then, click the ‘Install Addon’ button.

Install the fee relief addon

Upon addon activation, you need to go to the Charitable » Settings page and switch to the ‘Extensions’ tab.

Here, you can check the ‘Opt-in checkbox, checked by default’ option as a fee relief mode. This will add a checked box to the donation form for fee recovery. If the user does not want to pay the processing fee, then they will have to uncheck this box.

However, if you don’t want to provide users with an option and automatically add the recovery fee along with the donation amount, then you can check the ‘Automatic opt-in’ option.

After that, you must click the ‘Enable Fee Relief’ button next to the payment gateways to activate fee recovery for payment processing.

Choose a fee relief option according to your liking

Once you do that, you can set a payment processing fee as a combination of a percentage and a fixed amount per donation.

For instance, if PayPal charges 2.9% and $0.30 per transaction, then these are the amounts that you will have to add in the fields.

Once you are done, don’t forget to click the ‘Save Changes’ button to store your settings.

Add recovery fee per donation for different payment gateways

Now, you must start building your website’s fundraising campaign. To do this, visit the Charitable » Add New page from the WordPress dashboard.

Here, you will have to enter a campaign name, after which you will be taken to the ‘Select a Template’ page.

From here, click the ‘Create Campaign’ button under a template of your choice.

Choose a campaign template

This will open the drag-and-drop builder, where you can drag, rearrange, and delete form fields according to your liking.

For example, you can add the ‘Donation Amount’ field and then add some custom amounts that users can choose from in the left column.

Add the donation amount form field from the drag and drop builder

Once you do that, you can also add a progress bar, social links, a campaign title, and more from the left sidebar. You can also configure payment gateways by switching to the ‘Payment’ tab.

For more information, you can see our tutorial on how to raise money with crowdfunding in WordPress.

Publish donation form

Once you are done, simply change the form status to ‘Publish’ from the dropdown menu in the top right corner of the screen. Then, click the ‘Save’ button at the top to store your settings.

Now, just visit your WordPress site to view the donation form with the fee recovery option.

Fee relief donation form preview

Bonus: Accept ACH Payments in WordPress

If you do not want to pass payment processing fees to customers in WordPress, then you should consider accepting ACH payments on your website.

ACH is an electronic bank-to-bank payment made through the Automated Clearing House (ACH) network in the United States. Keep in mind that this method will only work if your business is based in the USA.

Accepting ACH payments can lower your transaction fees a lot as Stripe’s fee for ACH is just 0.8% per transaction compared to its usual 2.9%.

For example, if you have a WooCommerce store and a customer buys some products for $100, then the transaction fee with ACH payments will be only $0.80. On the other hand, payment processing fees using other methods will be $3.20.

You can easily start accepting ACH payments on your website using WP Simple Pay.

Simply install and activate the plugin and then visit the WP Simple Pay » Add New page from your WordPress dashboard. Here, you must choose the ‘ACH Direct Debit Form’ template and create a payment form in the builder.

Select the ACH Direct Debit Form Template

Once you add the form to your website, you will have to pay a lower transaction fee for users choosing this option as a payment gateway.

For more detailed instructions, you can see our tutorial on how to accept ACH payments in WordPress.

We hope this article helped you learn how to easily pass payment processing fees to customers in WordPress. You may also want to see our beginner’s guide on how to easily accept credit card payments on your WordPress site and our top picks for the best WordPress credit card processing plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Pass Payment Processing Fees to Customers in WordPress first appeared on WPBeginner.

AI-powered Code Reviews: The Future of Collaborative Development

AI-powered code reviews are bringing about a revolution in the way developers collaborate, enabling more efficient, accurate, and thorough evaluations of code prior to its integration into the central project repository. This transformation is made possible by leveraging machine learning and artificial intelligence to automate and enhance different facets of the code review process, presenting a futuristic approach to collaborative development.

In this examination, we delve into the ways in which AI-driven tools are shaping the future of software development, emphasizing their impact, advantages, and potential difficulties.

Enhancing Efficiency and Accuracy with AI-Powered Code Review

AI-powered code review tools significantly enhance the efficiency and accuracy of code analysis.
By automating routine checks, developers can divert their focus to more complex and creative aspects of code development.
Key Features:

  • Automated Error Detection: AI tools swiftly pinpoint syntax errors, typos, and logical errors that may elude human reviewers.

  • Code Style Consistency: AI ensures code style consistency to bolster maintainability, reducing the cognitive load on human reviewers by enforcing coding standards throughout a project.

  • Real-time Feedback: AI furnishes immediate feedback, hastening the learning process and fostering continuous improvement in code quality.

  • Predictive Analysis: Some AI tools go beyond identifying existing issues to predict potential future errors or inefficiencies based on code patterns.

Streamlining Collaboration with AI-Powered Code Review

AI-powered code review tools streamline collaborative development by facilitating the review process and directing human reviewers' efforts more effectively.
Key Benefits:

  • Distributed Knowledge: AI tools leverage a vast range of programming knowledge, including best practices and security guidelines. This ensures that teams with varying skill levels can produce high-quality code.

  • Conflict Resolution: AI offers objective, data-driven feedback, reducing subjective disagreements concerning coding styles or practices.

  • Enhanced Learning Environment: New developers can learn from AI-generated suggestions, improving their skills and knowledge while contributing to projects.

  • Scalability: AI tools can handle a growing volume of code without adding strain, making them well-suited for rapidly scaling projects.

Addressing Potential Challenges in AI-Powered Code Review

While AI-powered code review toolsoffer significant advantages, there are challenges that need to be managed to maximize their effectiveness in collaborative development.
Key Challenges:

  • Complexity and Context Understanding: AI may struggle to grasp the broader context of complex code segments, potentially missing issues that require deep understanding of the project's overall architecture.

  • Integration with Human Reviewers: Striking a balance between AI suggestions and human insight is crucial. Developers must determine when to rely on AI feedback and when to seek human judgment.

  • Continuous Learning and Adaptation: AI models require ongoing training to stay up-to-date with new programming languages, frameworks, and best practices.

  • Privacy and Security Concerns: Privacy and security should be prioritized to ensure that AI tools respect code privacy and do not expose sensitive information.

Conclusion

AI-powered code review tools like Bito are poised to become a cornerstone of collaborative development, offering a blend of efficiency, accuracy, and educational value that can significantly accelerate project timelines and improve code quality. However, the success of these tools relies not just on technological advancement but on their thoughtful integration into the human aspect of development processes. As AI continues to evolve, its role in enhancing collaborative efforts in software development is expected to grow, making it an indispensable tool for developers aiming to meet the rising demands for quality and innovation in the digital age.

The End Of My Gatsby Journey

A fun fact about me is that my birthday is on Valentine’s Day. This year, I wanted to celebrate by launching a simple website that lets people receive anonymous letters through a personal link. The idea came up to me at the beginning of February, so I wanted to finish the project as soon as possible since time was of the essence.

Having that in mind, I decided not to do SSR/SSG with Gatsby for the project but rather go with a single-page application (SPA) using Vite and React — a rather hard decision considering my extensive experience with Gatsby. Years ago, when I started using React and learning more and more about today’s intricate web landscape, I picked up Gatsby.js as my render framework of choice because SSR/SSG was necessary for every website, right?

I used it for everything, from the most basic website to the most over-engineered project. I absolutely loved it and thought it was the best tool, and I was incredibly confident in my decision since I was getting perfect Lighthouse scores in the process.

The years passed, and I found myself constantly fighting with Gatsby plugins, resorting to hacky solutions for them and even spending more time waiting for the server to start. It felt like I was fixing more than making. I even started a series for this magazine all about the “Gatsby headaches” I experienced most and how to overcome them.

It was like Gatsby got tougher to use with time because of lots of unaddressed issues: outdated dependencies, cold starts, slow builds, and stale plugins, to name a few. Starting a Gatsby project became tedious for me, and perfect Lighthouse scores couldn’t make up for that.

So, I’ve decided to stop using Gatsby as my go-to framework.

To my surprise, the Vite + React combination I mentioned earlier turned out to be a lot more efficient than I expected while maintaining almost the same great performance measures as Gatsby. It’s a hard conclusion to stomach after years of Gatsby’s loyalty.

I mean, I still think Gatsby is extremely useful for plenty of projects, and I plan on talking about those in a bit. But Gatsby has undergone a series of recent unfortunate events after Netlify acquired it, the impacts of which can be seen in down-trending results from the most recent State of JavaScript survey. The likelihood of a developer picking up Gatsby again after using it for other projects plummeted from 89% to a meager 38% between 2019 and 2022 alone.

Although Gatsby was still the second most-used rendering framework as recently as 2022 — we are still expecting results from the 2023 survey — my prediction is that the decline will continue and dip well below 38%.

Seeing as this is my personal farewell to Gatsby, I wanted to write about where, in my opinion, it went wrong, where it is still useful, and how I am handling my future projects.

Gatsby: A Retrospective

Kyle Mathews started working on what would eventually become Gatsby in late 2015. Thanks to its unique data layer and SSG approach, it was hyped for success and achieved a $3.8 million funding seed round in 2018. Despite initial doubts, Gatsby remained steadfast in its commitment and became a frontrunner in the Jamstack community by consistently enhancing its open-source framework and bringing new and better changes with each version.

So... where did it all go wrong?

I’d say it was the introduction of Gatsby Cloud in 2019, as Gatsby aimed at generating continuous revenue and solidifying its business model. Many (myself included) pinpoint Gatsby’s downfall to Gatsby Cloud, as it would end up cutting resources from the main framework and even making it harder to host in other cloud providers.

The core framework had been optimized in a way that using Gatsby and Gatsby Cloud together required no additional hosting configurations, which, as a consequence, made deployments in other platforms much more difficult, both by neglecting to provide documentation for third-party deployments and by releasing exclusive features, like incremental builds, that were only available to Gatsby users who had committed to using Gatsby Cloud. In short, hosting projects on anything but Gatsby Cloud felt like a penalty.

As a framework, Gatsby lost users to Next.js, as shown in both surveys and npm trends, while Gatsby Cloud struggled to compete with the likes of Vercel and Netlify; the former acquiring Gatsby in February of 2023.

“It [was] clear after a while that [Gatsby] weren’t winning the framework battle against Vercel, as a general purpose framework [...] And they were probably a bit boxed in by us in terms of building a cloud platform.”

Matt Biilmann, Netlify CEO

The Netlify acquisition was the last straw in an already tumbling framework haystack. The migration from Gatsby Cloud to Netlify wasn’t pretty for customers either; some teams were charged 120% more — or had incurred extraneous fees — after converting from Gatsby Cloud to Netlify, even with the same Gatsby Cloud plan they had! Many key Gatsby Cloud features, specifically incremental builds that reduced build times of small changes from minutes to seconds, were simply no longer available in Netlify, despite Kyle Mathews saying they would be ported over to Netlify:

“Many performance innovations specifically for large, content-heavy websites, preview, and collaboration workflows, will be incorporated into the Netlify platform and, where relevant, made available across frameworks.”

— Kyle Mathews

However, in a Netlify forum thread dated August 2023, a mere six months after the acquisition, a Netlify support engineer contradicted Mathews’s statement, saying there were no plans to add incremental features in Netlify.

That left no significant reason to remain with Gatsby. And I think this comment on the same thread perfectly sums up the community’s collective sentiment:

“Yikes. Huge blow to Gatsby Cloud customers. The incremental build speed was exactly why we switched from Netlify to Gatsby Cloud in the first place. It’s really unfortunate to be forced to migrate while simultaneously introducing a huge regression in performance and experience.”

Netlify’s acquisition also brought about a company restructuring that substantially reduced the headcount of Gatsby’s engineering team, followed by a complete stop in commit activities. A report in an ominous tweet by Astro co-founder Fred Scott further exacerbated concerns about Gatsby’s future.

Lennart Jörgens, former full-stack developer at Gatsby and Netlify, replied, insinuating there was only one person left after the layoffs:

You can see all these factors contributing to Gatsby’s usage downfall in the 2023 Stack Overflow survey.

Biilmann addressed the community’s concerns about Gatsby’s viability in an open issue from the Gatsby repository:

“While we don’t plan for Gatsby to be where the main innovation in the framework ecosystem takes place, it will be a safe, robust and reliable choice to build production quality websites and e-commerce stores, and will gain new powers by ways of great complementary tools.”

— Matt Biilmann

He also shed light on Gatsby’s future focus:

  • “First, ensure stability, predictability, and good performance.
  • Second, give it new powers by strong integration with all new tooling that we add to our Composable Web Platform (for more on what’s all that, you can check out our homepage).
  • Third, make Gatsby more open by decoupling some parts of it that were closely tied to proprietary cloud infrastructure. The already-released Adapters feature is part of that effort.”

— Matt Biilmann

So, Gatsby gave up competing against Next.js on innovation, and instead, it will focus on keeping the existing framework clean and steady in its current state. Frankly, this seems like the most reasonable course of action considering today’s state of affairs.

Why Did People Stop Using Gatsby?

Yes, Gatsby Cloud ended abruptly, but as a framework independent of its cloud provider, other aspects encouraged developers to look for alternatives to Gatsby.

As far as I am concerned, Gatsby’s developer experience (DX) became more of a burden than a help, and there are two main culprits where I lay the blame: dependency hell and slow bundling times.

Dependency Hell

Go ahead and start a new Gatsby project:

gatsby new

After waiting a couple of minutes you will get your brand new Gatsby site. You’d rightly expect to have a clean slate with zero vulnerabilities and outdated dependencies with this out-of-the-box setup, but here’s what you will find in the terminal once you run npm audit:

18 vulnerabilities (11 moderate, 6 high, 1 critical)

That looks concerning — and it is — not so much from a security perspective but as an indication of decaying DX. As a static site generator (SSG), Gatsby will, unsurprisingly, deliver a static and safe site that (normally) doesn’t have access to a database or server, making it immune to most cyber attacks. Besides, lots of those vulnerabilities are in the developer tools and never reach the end user. Alas, relying on npm audit to assess your site security is a naive choice at best.

However, those vulnerabilities reveal an underlying issue: the whopping number of dependencies Gatsby uses is 168(!) at the time I’m writing this. For the sake of comparison, Next.js uses 16 dependencies. A lot of Gatsby’s dependencies are outdated, hence the warnings, but trying to update them to their latest versions will likely unleash a dependency hell full of additional npm warnings and errors.

In a related subreddit from 2022, a user asked, “Is it possible to have a Gatsby site without vulnerabilities?”

The real answer is disappointing, but as of March 2024, it remains true.

A Gatsby site should work completely fine, even with that many dependencies, and extending your project shouldn’t be a problem, whether through its plugin ecosystem or other packages. However, when trying to upgrade any existing dependency you will find that you can’t! Or at least you can’t do it without introducing breaking changes to one of the 168 dependencies, many of which rely on outdated versions of other libraries that also cannot be updated.

It’s that inception-like roundabout of dependencies that I call dependency hell.

Slow Build And Development Times

To me, one of the most important aspects of choosing a development tool is how comfortable it feels to use it and how fast it is to get a project up and running. As I’ve said before, users don’t care or know what a “tech stack” is or what framework is in use; they want a good-looking website that helps them achieve the task they came for. Many developers don’t even question what tech stack is used on each site they visit; at least, I hope not.

With that in mind, choosing a framework boils down to how efficiently you can use it. If your development server constantly experiences cold starts and crashes and is unable to quickly reflect changes, that’s a poor DX and a signal that there may be a better option.

That’s the main reason I won’t automatically reach for Gatsby from here on out. Installation is no longer a trivial task; the dependencies are firing off warnings, and it takes the development server upwards of 30 seconds to boot. I’ve even found that the longer the server runs, the slower it gets; this happens constantly to me, though I admittedly have not heard similar gripes from other developers. Regardless, I get infuriated having to constantly restart my development server every time I make a change to gatsby-config.js, gatsby-node.js files, or any other data source.

This new reality is particularly painful, knowing that a Vite.js + React setup can start a server within 500ms thanks to the use of esbuild.

Running gatsby build gets worse. Build times for larger projects normally take some number of minutes, which is understandable when we consider all of the pages, data sources, and optimizations Gatsby does behind the scenes. However, even a small content edit to a page triggers a full build and deployment process, and the endless waiting is not only exhausting but downright distracting for getting things done. That’s what incremental builds were designed to solve and the reason many people switched from Netlify to Gatsby Cloud when using Gatsby. It’s a shame we no longer have that as an available option.

The moment Gatsby Cloud was discontinued along with incremental builds, the incentives for continuing to use Gatsby became pretty much non-existent. The slow build times are simply too costly to the development workflow.

What Gatsby Did Awesomely Well

I still believe that Gatsby has awesome things that other rendering frameworks don’t, and that’s why I will keep using it, albeit for specific cases, such as my personal website. It just isn’t my go-to framework for everything, mainly because Gatsby (and the Jamstack) wasn’t meant for every project, even if Gatsby was marketed as a general-purpose framework.

Here’s where I see Gatsby still leading the competition:

  • The GraphQL data layer.
    In Gatsby, all the configured data is available in the same place, a data layer that’s easy to access using GraphQL queries in any part of your project. This is by far the best Gatsby feature, and it trivializes the process of building static pages from data, e.g., a blog from a content management system API or documentation from Markdown files.
  • Client performance.
    While Gatsby’s developer experience is questionable, I believe it delivers one of the best user experiences for navigating a website. Static pages and assets deliver the fastest possible load times, and using React Router with pre-rendering of proximate links offers one of the smoothest experiences navigating between pages. We also have to note Gatsby’s amazing image API, which optimizes images to all extents.
  • The plugin ecosystem (kinda).
    There is typically a Gatsby plugin for everything. This is awesome when using a CMS as a data source since you could just install its specific plugin and have all the necessary data in your data layer. However, a lot of plugins went unmaintained and grew outdated, introducing unsolvable dependency issues that come with dependency hell.

I briefly glossed over the good parts of Gatsby in contrast to the bad parts. Does that mean that Gatsby has more bad parts? Absolutely not; you just won’t find the bad parts in any documentation. The bad parts also aren’t deal breakers in isolation, but they snowball into a tedious and lengthy developer experience that pushes away its advocates to other solutions or rendering frameworks.

Do We Need SSR/SSG For Everything?

I’ll go on record saying that I am not replacing Gatsby with another rendering framework, like Next.js or Remix, but just avoiding them altogether. I’ve found they aren’t actually needed in a lot of cases.

Think, why do we use any type of rendering framework in the first place? I’d say it’s for two main reasons: crawling bots and initial loading time.

SEO And Crawling Bots

Most React apps start with a hollow body, only having an empty <div> alongside <script> tags. The JavaScript code then runs in the browser, where React creates the Virtual DOM and injects the rendered user interface into the browser.

Over slow networks, users may notice a white screen before the page is actually rendered, which is just mildly annoying at best (but devastating at worst).

However, search engines like Google and Bing deploy bots that only see an empty page and decide not to crawl the content. Or, if you are linking up a post on social media, you may not get OpenGraph benefits like a link preview.

<body>
  <div id="root"></div>

  <script type="module" src="/src/main.tsx"></script>
</body>

This was the case years ago, making SSR/SSG necessary for getting noticed by Google bots. Nowadays, Google can run JavaScript and render the content to crawl your website. While using SSR or SSG does make this process faster, not all bots can run JavaScript. It’s a tradeoff you can make for a lot of projects and one you can minimize on your cloud provider by pre-rendering your content.

Initial Loading Time

Pre-rendered pages load faster since they deliver static content that relieves the browser from having to run expensive JavaScript.

It’s especially useful when loading pages that are behind authentication; in a client-side rendered (CSR) page, we would need to display a loading state while we check if the user is logged in, while an SSR page can perform the check on the server and send back the correct static content. I have found, however, that this trade-off is an uncompelling argument for using a rendering framework over a CSR React app.

In any case, my SPA built on React + Vite.js gave me a perfect Lighthouse score for the landing page. Pages that fetch data behind authentication resulted in near-perfect Core Web Vitals scores.

What Projects Gatsby Is Still Good For

Gatsby and rendering frameworks are excellent for programmatically creating pages from data and, specifically, for blogs, e-commerce, and documentation.

Don’t be disappointed, though, if it isn’t the right tool for every use case, as that is akin to blaming a screwdriver for not being a good hammer. It still has good uses, though fewer than it could due to all the reasons we discussed before.

But Gatsby is still a useful tool. If you are a Gatsby developer the main reason you’d reach for it is because you know Gatsby. Not using it might be considered an opportunity cost in economic terms:

“Opportunity cost is the value of the next-best alternative when a decision is made; it’s what is given up.”

Imagine a student who spends an hour and $30 attending a yoga class the evening before a deadline. The opportunity cost encompasses the time that could have been dedicated to completing the project and the $30 that could have been used for future expenses.

As a Gatsby developer, I could start a new project using another rendering framework like Next.js. Even if Next.js has faster server starts, I would need to factor in my learning curve to use it as efficiently as I do Gatsby. That’s why, for my latest project, I decided to avoid rendering frameworks altogether and use Vite.js + React — I wanted to avoid the opportunity cost that comes with spending time learning how to use an “unfamiliar” framework.

Conclusion

So, is Gatsby dead? Not at all, or at least I don’t think Netlify will let it go away any time soon. The acquisition and subsequent changes to Gatsby Cloud may have taken a massive toll on the core framework, but Gatsby is very much still breathing, even if the current slow commits pushed to the repo look like it’s barely alive or hibernating.

I will most likely stick to Vite.js + React for my future endeavors and only use rendering frameworks when I actually need them. What are the tradeoffs? Sacrificing negligible page performance in favor of a faster and more pleasant DX that maintains my sanity? I’ll take that deal every day.

And, of course, this is my experience as a long-time Gatsby loyalist. Your experience is likely to differ, so the mileage of everything I’m saying may vary depending on your background using Gatsby on your own projects.

That’s why I’d love for you to comment below: if you see it differently, please tell me! Is your current experience using Gatsby different, better, or worse than it was a year ago? What’s different to you, if anything? It would be awesome to get other perspectives in here, perhaps from someone who has been involved in maintaining the framework.

Further Reading On SmashingMag