Using Gatsby to go Headless

We take a look at how, and why, we use Gatsby to deliver the frontends to some of our headless sites.

The decision to go for a headless approach to a site is not one to be taken lightly. In fact, we've recently talked about some of the issues and why we took the decision to convert a headless Magento 2 site into one with a traditional front end. However, there are situations where going headless can yield a number of benefits if it's done correctly.

When we were planning to rebuild the WinTech Racing site, we decided that as a non-transactional site, the potential performance benefits of a headless approach would be well worth investigating.

One of the issues with a headless implementation is often that the content is all loaded dynamically by each component on the page. This can be really efficient because assets and information are only loaded when they're needed. You may have seen things like this on a site where parts of the site just show grey blocks and then the content replaces those after a short while. Which is fine if a person is waiting for the site to load, but when a search engine like Google comes along to view the site, it won't know to wait for these elements to load in, and so might miss vital information on the page.


This is where a system like Gatsby comes in. Although headless, Gatsby uses 'Server Side Rendering' so that the bulk of the page content is all prepared in advance during a build process and is available immediately when the page is requested. Any dynamic areas are then layered over the top of that, but at the point that the search engine requests the page, the main content is all there waiting.

Gatsby also uses 'Static Site Generation' which also helps deliver pages very quickly. The WinTech Racing site uses a Wordpress admin area, and what would typically happen when viewing one of these Wordpress articles is you'd click the link to that page, the server gets that request and then starts to put the page together. It will need to check the database to get the article content, it will need to check another area of the database to get the related posts, check in other places for configuration settings and all sorts of other things, and put this all together to return the page. This is usually fairly quick, but it does take time. What Gatsby does is take all of that offline essentially - all of those elements are combined during the build process and then saved as static files. This means the page is already built and can be sent back as soon as it's requested.

Additionally the site that Gatsby generates is a Progressive Web App (PWA) meaning it has the best of both worlds of being a web page and an installable app. The site can be 'installed' on your mobile device and will work offline for any pages you've already visited. Even if you're online, revisiting a page on a PWA is really fast - the browser won't even bother to contact the server to get the page, it'll use the one it has saved on your phone which will load nearly instantly.

There are a lot of other nice speed enhancements built into Gatsby - when you visit a page, the browser is told to check through and look for any links to other pages that you might go on to visit. It requests these in the background, so that if you do click them, you'll get an almost instant response again.


As we said, all of the content for the Win Tech site is in a Wordpress backend which makes it ideal for the team to quickly add new articles and keep the site content fresh. We use Gatsby Cloud which is a useful service that manages the build process and hosts the site, and this means when a change is made in the admin, a new build can be triggered and this will update the live site as soon as it's ready.

Behind the scenes though, all of the Wordpress content is pulled into Gatsby using GraphQL. This is a query language that efficiently gets just the required data and returns it in a standardised format that can be used when creating the page. This might be all of the information required to build an image carousel for example with the image locations, the relevant text and the order that they need to go in. This can then all be used to populate a component on the front end.

Gatsby is layered on the popular React framework, meaning rich, dynamic content can be added by ‘hydrating’ the static content with interactivity. This gives us the best of both worlds - core content for search engines and then functionality and visual enhancements for visitors to the site.


As we said, going headless needs careful thought, but for the right projects and done with the right systems, it can mean beautiful, rich sites that load very quickly can be created. Get in touch if you’re considering going headless and we’d be delighted to talk through the options with you.


Like what you see? Need a hand? Want to work together? If so, please get in touch so we can discuss your next project.

Please get in touch for a no obligation, highly accurate estimate and timeline for a new Shopify Plus eCommerce site.

Enter your email address to sign up to our newsletter, featuring case studies, insights, industry news and much more.