Using Gatsby to go Headless

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.

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.