Gatsby 5 boasts impressive, bleeding-edge technology to supercharge your sites. This year’s Gatsby update provides one of the best features in the technology yet, giving the best possible experience to the users all around the world.

Slice API
With Gatsby 5, Gatsby amplified the speed of Incremental Builds and Incremental Deploys by introducing the Slice API. Slices allow developers to define highly-shared components in their sites which will then inform Gatsby to build those shared components only once. After the files are built, the platform will stitch the resulting markup and JavaScript to the pages that include that shared component. This means that changes to highly-shared components (such as navigation, banners, headers, and footers) no longer require a rebuild of all pages that use that shared component.

Gatsby Cloud also offers an optimization for Enterprise plans that speeds up Slice builds significantly. The data here is just measuring Gatsby Cloud to show the impact of Slices, since other cloud solutions were upwards of twenty minutes and visually minimized the impact. On Gatsby Cloud is seen an improvement of two whole minutes for code changes to a shared header.

With a site of our size, minor changes like updating a footer or marketing banner used to result in a complete rebuild of our site. With Slices in Gatsby 5 speeding up Incremental Builds, we’re expecting to save hours of time waiting for builds every week.

Nikan Shahidi, CEO at Webstacks said

Partial Hydration (Beta)
Traditional react-based websites must wait for all JavaScript for all components to be available before page elements become interactive. When leveraging Gatsby 5’s Partial Hydration, developers are able to ship and hydrate only the necessary JavaScript for each component on a page, thereby producing the fastest possible visitor experience when using React, and highest scores via Google Web Vitals.

Hydrating every component on a React page always felt unnecessary. Gatsby makes it simple to only send Javascript to the components that actually need it with Partial Hydration. This is easy for our developers and great for our users.

Justin Smith, Developer at Intralox said

Script Component
it’s always been a challenge to performantly add scripts to websites. Script execution in the browser is blocked by default, and the developers are responsible for implementing many useful scripts in our web pages without degrading the experience for the end-user.

In Gatsby 5, a built-in Script component can be used that aids in loading scripts performantly. The Script component offers a convenient way to declare different loading strategies, and a default loading strategy that gives Gatsby users strong performance out of the box.

Head API
To ensure that websites are found by the intended users, search engines inspect websites for specific bits of metadata, like title, description, and keywords. Historically, Gatsby developers have been instructed to rely on third-party libraries like react-helmet to do this. Gatsby has built-in solutions for most things like Images or Scripts that the users have come to love. Gatsby 5 includes the Head API, which offers native support for SEO, as well.

GraphiQL v2
GraphiQL is the GraphQL integrated development environment (IDE). It’s a powerful (and all-around awesome) tool you’ll use often while building Gatsby websites. When running gatsby develop, you can use GraphiQL to run queries, get code samples, and preview your data by going to localhost:8000/___graphql.

Incremental Builds and Deploys
Speed is critical to maintaining a healthy developer and content editor experience in a framework. Behind the Scenes of the new Slice API are two pieces of incredibly fast technology: Incremental Builds and Incremental Deploys. By knowing exactly what changed in your site, Gatsby can build only what changed to save you time. After the build is finished, it can also only deploy what changed.