This Gatsby post was written for Gatsby 3 and is no longer maintained. If you would like to try out SvelteKit or Astro, check out the maintained posts which are based on those. Astro lets you continue to use React but also with partial hydration which can be used to provide an enhanced user experience. SvelteKit offers server side rendering as well as static site generation. See the post on how performance improved switching from Gatsby to Astro for more background.
✨ Gatsby v3 #
What's new on Gatsby Cloud? Gatsby Conf 2021 saw a raft of Gatsby improvements announced with the release of Gatsby v3. Included was the new Image API offering AVIF support out-of-the-box as well as a new WordPress Integration. On top, Gatsby v3 fully supports React 17 and fast refresh in development. With all those improvements on Gatsby itself, some new Gatsby Cloud features got overshadowed. In this post, we run through a few of them.
If you are new to Gatsby Cloud, you might not know it already offered incremental builds. This is a handy feature which saves you having to rebuild the whole site if you make small changes to only a few pages. The impact of this can be substantial for large e-commerce sites, where products are frequently being updated. Another established feature in the Gatsby Cloud arsenal is automatic Lighthouse report generation on build. These reports are invaluable for tracking accessibility and speed. You can see exactly which pull request broke accessibility or increased the First Contentful Paint time . With the introduction of Core Web Vitals around the corner , it has never been more important to monitor site speed.
☁️ What’s new on Gatsby Cloud: Serverless Functions #
The first new addition it Gatsby Cloud is probably the most exciting: Gatsby Functions. Gatsby Functions are the Gatsby cloud implementation of Serverless Functions .
Serverless functions are great for JAMStack apps. They let you run code which you would traditionally have to run on your own server. With serverless you can run code, such as comment and like submission for your static site on a cloud server. There is no need for you to worry about scaling-up during busy periods, or paying to keep an idle server running during quiet times. The functions only run when they are needed, ramping up automatically.
Previously, you had to use a combination of Gatsby Cloud and Netlify to bring serverless to Gatsby Cloud . I have done a bit of experimenting with Gatsby Cloud functions and written a post on using Gatsby Cloud functions to create an accessible contact form with reCAPTCHA.
☁️ What’s new on Gatsby Cloud: Fastly CDN #
What else is new on Gatsby Cloud? Fastly CDN. Previously, you had to use Netlify, Fastly , or another provider to get CDN support. What is a CDN? CDN stands for Content Delivery Network, you might also hear about it referred to as an edge network. As a small startup without a CDN, typically, you would just have a single server to run your website on. If your server is based in California, but you have a lot of site visitors from Japan, those visitors might get quite slow connections and poor user experience on your website. With a CDN, your site is mirrored automatically around the world. No matter where on the globe the user connects from, they will connect to a server close to them. It goes without saying this will work wonders for user experience, and keep your Chrome UX Report looking amazing.
💰 What’s new on Gatsby Cloud: Generous Free Tier #
There was previously an RTE (Real Time Edits) cap on builds on Gatsby Cloud. Gatsby removed that cap because some users found it confusing and frustrating . Now there is not even a cap on the number of build minutes in the free tier, just bandwidth.
👀 What’s Still Missing? #
That's already a lot of new improvements. I wonder what's next. I have noticed on free tier Gatsby
Cloud websites, the x-robots-tag: none header is served automatically.
I think this might just be the case when you host the site on a Gatsby domain instead of your own domain.
If that is the case, I guess it is a small thing. The only reason the header matters is that it impacts
Search Engine Optimization (SEO). If you are just running a test site, using a Gatsby domain, I don't
suppose you are that bothered about SEO. I wonder if this will get changed, though.
The other thing I have noticed is that you can run custom scripts on Netlify, but I haven't been able to get them to run on Gatsby Cloud. I haven't found anything in the docs on it either. It is possible to run scripts just before, or just after packages are installed . However, if you need to run scripts just after the site is built (for example to tinker with the generated HTTP headers), you might need to stick with Netlify .
🙏🏽 Feedback #
Have you found this post useful? I hope it made sense as well as you finding it useful. What features would you like to see added Gatsby Cloud next? Have I missed off one of your favourite features? I would love to know your thoughts. Also get in touch if you want to see other posts in this area. Are there other services you would like me to look at for you? If you have found this post useful and can afford even a small contribution, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. You can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. We post regularly on online privacy and security, as well as Gatsby v3. Also, subscribe to the newsletter to keep up-to-date with our latest projects.