Gatsby for Marketing Websites – Apiumhub

In marketing websites, the main goal is to attract users and get leads or conversions. To get a good amount of traffic and good positioning, content and SEO strategies are important. In the entire process of building such websites, there are usually two different types of professionals involved: SEO experts and web developers. On the one hand, the SEO team works on defining the content, keywords, microformats and more, while on the other hand, the development team works on the technical implementation.

The simplest way to create such projects is to work with a CMS like WordPress, as the interface is user-friendly for SEO experts and there is some room for design customization. However, this may be a limited solution for websites that require custom functionality, custom designs, and more control over the application. In these cases, the websites need to be fully developed by an IT team. If you use any technology the challenge with this approach is whenever the SEO team needs to change some content, the development team needs to be involved and the changes take longer to go live Is.

This is where frameworks like Gatsby come into play. They give developers complete control over the code while at the same time allowing SEO experts to work with the 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 to fetch CMS data.

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

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

As for SSG, it turns all code into static files and these only need to be returned to the server when the user requests them. It has many advantages:

  • Very good performance since the website is built as static files and requests are already made before being served.
  • More security because there is no reference to the database.
  • High scalability since HTML-based files consume very little on the server.
  • Better SEO score, as pages are not generated dynamically and crawling can be done with full data.

Gatsby Plugins Ecosystem

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

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

What’s not so great about Gatsby?

  • Gatsby uses webpack for bundling, but if you need to add configuration on top of it, you need to use gatsby.config.js file. For debugging very specific configuration or bundling process, it can get more complicated.
  • There are two compilation modes: gatsby develop While a server runs in the background with Live Reload gatsby build Creates all static files as in production mode. during gatsby develop There are some production phases that have been skipped, so when the applications are ready to go live, some issues may arise while executing the build phase. To avoid this and block deployment, it is advisable to find and run build issues as soon as possible gatsby build through automation.
  • Gatsby websites are large and fast at the cost of resource-consuming build time. This is especially true when the website consists of a large number of pages. However, Gatsby has improved this and Deferred Static Generation (DSG) pages can be configured to be generated at run-time. A page with a large amount of posts can set its oldest posts to use this building mode to reduce building time.
  • Content change does not mean code change, but deployment is needed to rebuild the application with the new data.
  • The plugins ecosystem is very useful but you may need to develop them yourself if you want to have full control over the functionalities.

what are the options?

Hugo

  • This is another SSG built into Go.
  • It is not specifically designed for content management through a CMS, even though it is possible to work with it. Content must be written in HTML or Markdown and there are tools that convert CMS data into Hugo-compatible formats.
  • Styling needs to be written as a new subject. This means it has to be structured in HTML files, partial and CSS.
  • Its build time is less as compared to Gatsby.

NextJS

  • It is a JavaScript framework that can work hybridly with static and server-side rendering.
  • It has SEO optimization for images, smart bundling, route prefetching, international routing, and more.
  • It is agnostic regarding the method of fetching the data, it is not limited to using GraphQL while Gatsby.
  • It uses Incremental Static Regeneration (ISR) to be able to decide which pages are created before deployment and which are created after deployment on request. The problem with this rendering method is that there can be data inconsistencies as some pages will be created with the latest available data and some will show older data.

conclusion

There are several technologies for building a marketing website: Hugo, Next, and Gatsby among others. If you like Go as a programming language and creation time is more important than content management via CMS, then Hugo is a good choice for you.

If you are more familiar with React, you can choose between NeXT or Gatsby. Next will give you full control of the libraries and methods of getting the data, while connecting Gatsby to the CMS will be easier and offer more ready-to-go starters and plugins.

Leave a Comment