Pass the previously created Slice component via the component key and give the Slice component a unique id. You can create a Slice by using the createSlice action from the createPages API in your gatsby-node. When a Header change is issued, this what a build looks like: You’ll use this component as your Slice component. Using Slices in your siteįor this example, let’s use the same scenario as described above - a large site that has a shared header. By knowing the intricate details of your site and the Slices within it, Gatsby Cloud can build and deploy the exact pieces needed to get your site updated with the latest content. With Gatsby Cloud Enterprise, however, your Slice component changes can build up to 90% faster. With Slices, we’ve seen improvements in build time by up to 20%.

With the introduction of Incremental Builds, Gatsby Cloud has been able to reduce build times signficantly by only building the pages that changed.

The React component you pass to createSlice via its component key is also referred to as “Slice component”.

The React component is also referred to as “Slice placeholder”. However, if the header was created as a Slice component, the new header content only need to be built once and all pages will pull the new header when it’s needed. In today’s frameworks, when you re-order the header content, the entire site needs to be rebuilt.

Support for the Gatsby Slice API was added in further the improvements seen by Incremental Builds, Gatsby includes the Slice API that allows you to split pages into individual parts.īy using the React component in combination with the createSlice API for common UI features, Gatsby will be able to build and deploy individual pieces of your site that had content changes, not just entire pages.

Slice in node js