Editor’s Note: This article is a companion post to the GatsbyConf 2022 talk on improving Gatsby Cloud Preview performance by Gatsby Senior Software Engineer Katherine Beck and Gatsby Senior Product Manager Jack Sellwood.
Building your website with Gatsby has always meant super-fast page performance. Gatsby’s static architecture (and powerful edge network) deliver content to users as quickly as possible. This hasn’t always translated into content editors being able to preview content as quickly as possible. Today we’d like to share a few best practices and a new feature on Gatsby Cloud designed to help content editors preview content faster.
Gatsby Cloud Incremental Deploys for Preview
Announced at GatsbyConf 2022, Incremental Deploys are now available for Preview. Incremental Deploys for Preview significantly improves Preview build performance. Even though builds are incremental, deploying site changes to Gatsby Cloud Hosting still pushed the entire site. Starting with Previews, this process is now incremental. Only the routes and pages that changed will be deployed. For a large site like gatsbyjs.com which has over 50,000 routes, deploys decreased from 30 seconds to about 1 second. The speed of deploys is now dependent on the number of routes being updated rather than the size of the site. For example, updating a single blog post will deploy only that blog post instead of the entire site.
- Gatsby Reference Guide: Enable Incremental Deploys for Preview
Gatsby Cloud Content Sync and Preview Status Indicator
A few weeks ago we announced Content Sync and Preview Status Indicator. Content Sync and Preview Status Indicator work together for a seamless “Open Preview” experience for content editors. While not improving build performance, you’ll want to enable these features for a great user-experience.
Gatsby Cloud Preview Best Practices
In addition to the features above, you can optimize your site’s code to improve Preview performance even further.
Avoid removing Preview data
When querying for data in page templates, don’t filter for “published” content as this will prevent draft content from being included in Preview. Source plugins detect NODE_ENV and appropriate include draft content for you, so you don’t need to do this.
Pass only the required context
Query for data from the page template where it will be used. For example, don’t query for all page data from gatsby-config.js because these queries will run for every data update, effectively breaking incremental builds.
Why even Preview?
Content editors rely on Preview to simulate what their content will look like when it goes live—before it goes live. Where developers have unit tests or smoke tests, content editors use Preview to check their content before shipping to production.
Have any questions about (or suggestions for) CMS Preview? Reach out to Jack Sellwood (@sellwood_jack) or Katherine Beck (@kmbeck428) on Twitter.