Gastby 5 went live recently with some pretty cool improvements! I’ll go over a few of them here.
Slice API
The Gatsby Slice API allows you to make components called Slices, which when they are updated, Gatsby only builds and ships changes for that little ‘slice’ of the site. This means that only the parts of the site in a changed Slice are rebuilt, improving performance in build time. Seems like it would be handy for navbars, footers, snackbars/banners etc.
Instantiating a slice seems fairly simple, according this example from Gatsby where a site-wide header component has been elected to become a Slice:
exports.createPages = async ({ actions }) => {
actions.createSlice({
id: `header`,
component: require.resolve(`./src/components/header.js`),
})
}After this, the <Slice/> component is called in the place of the Header whereever the Header was called:
export const DefaultLayout = ({ children, headerClassName }) => {
return (
<div className={styles.defaultLayout} />
- <Header className={headerClassName} />
+ <Slice alias="header" className={headerClassName} />
{content}
<Footer />
</div>
)
}Again, there are number of other implementation details, but this general concept seems easy enough and is a cool way to cut down on build times.
Partial Hydration
This improvement is still in the beta stage. Hydration is the process by which Javascript converts a static HTML file into an interactive web page, usually by attaching event handlers to the HTML elements. The HTML is rendered on the server and sent to the browser first, allowing useful data to be displayed to the user before it becomes interactive. This improves user perception of loading times.
However, Gatsby’s partial hydration feature relies upon React server components to hydrate ‘islands of interactivity’ that are hydrated individually. This would improve performance and user impressions of the page.
Head API
Gatsby now includes a built in Head component, allowing you to configure the <head> element for a page. According to Gatsby, this component is `more performant, has a smaller bundle size, and supports the latest React features’ than other libraries like react-helmet that do similar things.
A look at implementing it:
export const Head = () => (
<>
<title>Hello World</title>
<meta name="description" content="Hello World" />
</>
)This does look pretty easy to implement, and also it allows you to export this component from one page and use it on another.
Gatsby Script
Like the Head API, the Script API is Gatsby’s is also an optimization of a html element, this time the <script> tag. Their Script component allows developers to specify different loading strategies which Gatsby describes as strongly performant, using the ‘strategy’ prop. This component essentially gives developers more flexibility and control over <script> elements.
Copycopy code to clipboard
import { Script, ScriptStrategy } from "gatsby"
<Script src="https://my-example-script" strategy={ScriptStrategy.postHydrate} />
<Script src="https://my-example-script" strategy={ScriptStrategy.idle} />
<Script src="https://my-example-script" strategy={ScriptStrategy.offMainThread} />Seems simple enough! I’d imagine there might be times where really granular script management would come in handy.
There were several other updates that I won’t go into detail here, but you can check them out at here!
- https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-slice/
- https://www.gatsbyjs.com/docs/how-to/performance/using-slices
- https://www.gatsbyjs.com/docs/conceptual/partial-hydration/
- https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
- https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/