Recently, the Gatsby team released a new minor update to Gatsby, v4.15.0, which included two new features: the Script component and GraphQL Typegen. Let's check out the Script component.

The headaches of loading third-party scripts into Gatsby

Integrating third-party scripts with ease was definitely a missing feature in the Gatsby ecosystem. While there was previously a community plugin which could help load external scripts, you become reliant on plugins to stay updated and each new script clogs up your gatsby-config.js file. The other way to load scripts in Gatsby was to make use of workarounds such as the built-in Gatsby browser and Gatsby SSR APIs, or through less performant and unwise means such as React Helmet. Clearly, a simplified script feature definitely deserved its own official Gatsby integration.

Here's an example of how I was previously incorporating third-party scripts, versus how I refactored my code to make use of the new Script component.

Ok, so not terrible. And sure, some of these third-party libraries might be accessible through npm or a Gatsby community plugin. Yet, more often than not when I need to embed a third-party script, it's usually an ugly, non-fancy, internal third-party script (you know the ones). One frustrating script I have to use for my job is a third-party script I don't have control over, and it's huge - trying to load this thing at build time is a performance nightmare.

So, you'd still be dealing with resources which might block page load, even if you defer the scripts. Plus, unless you make use of the wrapPageElement function (instead of the wrapRootElement function) and really specify where you're using your scripts, you're stuck with scripts rendering on every page in your Gatsby project. Luckily, we have way more control over where and how we call our scripts, thanks to Gatsby's new Script component.

The new, shiny Script component

With the release of Gatsby v4.15.0, we can now utilize the new Script component feature. Here it is in action, using those same scripts from before.

Ok, so it isn't THAT different from what I was doing previously. To be clear, I'm making use of a pattern to avoid code duplication by creating a shared file for gatsby-browser.js and gatsby-ssr.js to consume (a pattern which the Gatsby team recommends).

Let's take a look at a different use case to see the value of the script being imported as a component specifically.

You can now make use of the Script component anywhere, including right inside your components directly! No need to worry about embedding scripts at a page or root level, now that you can import scripts with ease.

Specifying loading strategies

Where the new Script component really shines is the ability to control load behavior. Gatsby's Script component also comes with the strategy attribute, which allows for even more specialized control over when scripts are called.

According to the Gatsby Script component documentation:

post-hydrate - Loads after the page has hydrated

idle - Loads after the page has become idle

off-main-thread (experimental) - Loads off the main thread in a web worker via Partytown

Gatsby's documentation shows us a super useful example of using Google Tag Manager and the off-main-thread strategy. Now you don't need to configure community plugin just to use Google Analytics!

While the Partytown integration is experimental, I'm excited to see how much it speeds up load performance on script-heavy pages. The Gatsby team even noted a 20% reduction in Total Blocking Time by making use of the off-main-thread strategy.

Overall, this is a very useful new feature to the official Gatsby build. You really can start improving your site's performance and still make use of third-party libraries and scripts. Yes, even for those projects where you still need jQuery for some reason (but I really don't recommend trying to wire up jQuery with Gatsby).

What do you think of Gatsby's new Script component? What were you doing to load scripts in Gatsby previously? Do you see yourself using it frequently?