Gatsby for marketing websites

In marketing websites, the main goal is to attract users and obtain leads or conversions. In order to get a good amount of traffic and good positioning, content and SEO strategies are crucial. Throughout the process of creating such websites, there are usually two very different types of professionals involved: SEO specialists and web developers. On the one hand, the SEO team works on defining the content, keywords, microformats, and others, while on the other hand, the development team works on the technical implementation. 

The most straightforward approach to creating such projects is to work with CMS like WordPress, since the interface is user-friendly for SEO specialists and there is some room for design customization. However, this might be a limited solution for websites that need custom functionalities, custom design, and more control over the application. In these cases, websites need to be fully developed by an IT team. The challenge with this approach if you use any technology, is that whenever the SEO team needs to change some content, the development team would need to be involved and changes take longer to go live. 

This is where frameworks like Gatsby come into play. They give developers full control over the code while at the same time allowing SEO specialists to work with a CMS of their choice.

What is Gatsby 

Gatsby is an open-source Static Site Generator (SSG) that uses React for development, Webpack for bundling, and GraphQL for fetching CMS data. 

It allows you to get data from various resources, such as WordPress, Contentful, DatoCMS, and many more. Querying with GraphQL means that you can create custom requests declaratively, and it also gives you a full interface for creating, testing your queries, and previewing the results. 

Since Gatsby is React-based, it is possible to work on it as any other React application, with components, hooks, styling libraries, and so on, giving developers full control over the design and behavior. You can create your own design system and make use of it on your Gatsby website. 

As a SSG, it turns all the code into static files and these only need to be returned from the server when the user requests them. This has many benefits:

• Very good performance since the website is built as static files and requests have already been made before serving. 
• More security because there are no references to databases. 
• High scalability since HTML-based files consumes very little on the servers.
• Better SEO score, since pages are not generated dynamically and crawling can be performed with full data. 

Gatsby plugins ecosystem 

Gatsby has a big community that offers many starters and plugins. These are some useful examples:

• Gatsby-plugin-sharp. This plugin exposes image processing functions for configuring responsiveness, dimensions, and quality of images. Image loading is critical for performance and SEO, and thus reducing image dimensions can help a lot. Full-resolution images can be uploaded in the CMS and developers can choose to crop them depending on the use case. 
• Gatsby-plugin-sitemap. This plugin helps you configure the sitemap of your website for SEO purposes.
• Gatsby-plugin-google-tagmanager. This plugin adds the Google Tag Manager to your site.
• Gatsby-plugin-google-amp. This plugin formats AMP pages.

What is not so nice about Gatsby? 

• Gatsby uses Webpack for bundling but if you need to add configuration on top of it, you need to use its gatsby.config.js file. For very specific configurations or debugging the bundling process, it can be more complicated. 
• There are two compiling modes: gatsby develop runs a server in the background with live reloads while gatsby build creates all static files as in production mode. During gatsby develop there are some production steps that are skipped, therefore when applications are ready to go live, some issues might arise when performing the build phase. To avoid this and blocking deployments, it is advisable to find building issues as soon as possible and run gatsby build through automation. 
• Gatsby websites are fast at the expense of having large and resource-consuming building times. This is especially true when the website has a large number of pages. However, Gatsby has improved this and with Deferred Static Generation (DSG) pages can be configured to be built in run-time. A page with a big amount of posts can set up its oldest posts to use this building mode to reduce building times. 
• Content changes do not imply changes in the code but do need deployment to build the application again with the new data. 
• The plugins ecosystem is very useful but if you would like to have full control over functionalities you might need to develop them yourself.

What are the alternatives?

 Hugo 

• It is another SSG that is built in Go. 
• It is not specifically designed for content management through CMS, even though it is possible to work with it. Content needs to be written in HTML or markdown and there are tools that transform CMS data to Hugo-compatible formats. 
• Styling needs to be written as a new theme. This means it has to be structured in HTML files, partials, and css. 
• It has lower building times than Gatsby. 

NextJS

• It’s a javascript framework that can work hybridly with static and server-side rendering.
• It has SEO optimizations for images, smart bundling, route prefetching, internationalized routing, and others. 
• It’s agnostic about the data fetching method, it’s not restricted to using GraphQL while Gatsby is. 
• It uses Incremental Static Regeneration (ISR) which consists of being able to decide which pages are built before deployment and which are built after deployment upon request. The problem with this rendering method is that there might be data inconsistencies since some pages would be built with the latest data available and some would show out-of-date data. 

Conclusions 

There are many technologies for creating marketing websites: Hugo, Next, and Gatsby among others. If you like Go as a programming language and building times are more important than content management through a CMS, Hugo is a good option for you. 

If you’re more familiar with React, you can choose from Next or Gatsby. Next will give you full control of libraries and fetching data methods, while Gatsby will be easier to connect to a CMS and will offer more ready-to-go starters and plugins.