We take a look at how, and why, we use Gatsby to deliver the frontends to some of our headless sites.
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.