Today I’m thrilled to share a number of improvements to the Gatsby Cloud Preview experience, including enhancements to Content Sync, improvements to the preview status indicator, and support for multiple, concurrent content editors. Even better, we’ve streamlined the Open Preview experience to ensure editors, no matter how many, are routed to the correct review page. Together, these updates make it even easier for teams to collaborate on publishing content.
👉 Enable Content Sync and Preview Status Indicator for your site on Gatsby Cloud
What we learned about Preview
Last year, we launched Incremental Preview which brought the power of Incremental Builds to Preview. Incremental Preview doubled reliability and made Preview for large, complex sites even faster. Since Preview now shares the same underlying infrastructure as Incremental Builds, any improvements to Incremental Builds improves both Builds and Preview.
With the rollout of Incremental Preview, we took this as a chance to re-evaluate the experience for content editors moving between Preview on Gatsby Cloud and their CMS.
The feedback we heard from users was clear. When content editors click “Open Preview” in their CMS, they expect a streamlined, easy-to-use experience.
Introducing Content Sync
Routing editors to the correct page typically requires that developers configure slug and URL structures. This process is tedious. For example, a single errant character for a specific content type can cause editors to arrive at a 404 page instead of the Preview page they are expecting to see when they click the Open Preview button.
Since Gatsby knows which nodes are associated with each page and URL on your site, we thought, why not automate this? With the introduction of ownerNodeId, Gatsby will determine the proper URL for the page you want to preview and route you to it.
ownerNodeId is part of a new service provided by Gatsby Cloud called Content Sync. Content Sync coordinates your CMS, source plugins, Cloud builds, and Gatsby framework to deliver a Preview experience that keeps all your content updates in sync.
Preview Status Indicator Improvements
Beyond making sure editors are routed to the correct page, we wanted to make it easier for content editors to understand when their Preview will be ready. With Preview Status Indicator, they’re notified when their content is ready to preview.
If something goes wrong, editors can share their preview page with developers. Since previews are now incremental, developers can even go back debug the specific build for the specific content update that failed.
Preview Status Indicator works great for large teams too. With Content Sync and Preview Status Indicator working together, Gatsby is able to determine which content updates are contextually relevant to the current content editor. Preview Status Indicator will only notify editors of changes to the current page they’re viewing or to the page that referred them to Preview when they clicked Open Preview.
Getting started with Content Sync
👉 Enable Content Sync and Preview Status Indicator for your site on Gatsby Cloud
Content Sync is currently available for Contentful and WordPress. Follow the help doc above for instructions on upgrading your site.
Preview Status Indicator is available to all sites on Gatsby Cloud; however, for the most streamlined preview experience, you’ll want to enable Content Sync.
A preview of…Preview
Taking all this together, we’ve significantly improved the reliability and user experience of Preview over the last year. As we look ahead to 2022, we’re focusing on improving Preview performance.
As we examined incremental build performance, we found other parts of the build process that could be made incremental. We’ll share more on this at GatsbyConf, but the early results are promising. Data updates that previously took 49 seconds should take less than 20 seconds.
We’re still not done though. In 2022, we’re making it a goal that all Preview builds complete in seconds (like single-digit seconds). Stay tuned.