What is Gatsby JS?

Gatsby is a modern, React-based open-source framework for creating high-performance marketing, content or e-commerce websites and web apps.

Gatsby is known as a so-called “Static Site Generator” and is even suitable for building mobile apps in connection with other technologies.

The first version of Gatsby was released in 2015. Since then, the ecosystem around Gatsby has developed rapidly. Today, more than 2500 plugins and many CMS connectors are available.

Gatsby is developed by Gatsby Inc., which also offers native cloud hosting for Gatsby sites with plenty of various benefits.

What is a Static Site Generator or Static Site Generation?

Static site generators like Gatsby differ from other web technologies because of the way the website and its content are shown to the visitors of a website.

When visitors come to static websites, no conventional web server takes over the generation of the content. (The latter is called “server-side rendering” and is mostly used with any dynamically rendered sites.)

Instead, all files of a static site, including their content, are generated statically in advance and only finished HTML pages with static content are transmitted when a user visits.

This means that, with static site generation, no database connections have to be established, and no plugins need to get loaded. As a result, static websites usually load very fast and are also difficult to attack by hackers.

However, static sites have the disadvantage that all content has to be regenerated if content and data in the CMS (e.g., texts, images, videos, etc.) changes. This regeneration is called the build process and can take quite a while for a large website.

Since this is a known potential problem, Gatsby already offers solutions like Incremental Site Generation (ISG), which massively shortens the build process by not updating the whole page, but only the parts that have changed. Of course, this has a very positive influence on the performance of the website.

What makes Gatsby special and different?

Gatsby is a React-based framework with a large community and numerous extensions for a wide variety of use cases – for example lazy loading to further optimize the performance of Gatsby sites.

Therefore, compared to other static site generators, Gatsby is a good choice if the website developers are familiar with and want to work with React.

For website operators and developers, the large Gatsby community also offers a high level of security that Gatsby will not disappear from the scene anytime soon.

How does Gatsby work?

Many data sources

In order for a website to display content and make it manageable, it naturally needs a source for this content.

Gatsby applications can access a variety of data sources. In addition to the REST-API standard, Gatsby can also process the GraphQL-API standard. GraphQL APIs are particularly scalable and efficient, and are therefore particularly well suited for delivering content to a Gatsby frontend.

Both CMS systems and simple files can serve as data sources for Gatsby frontends. Popular (headless) CMS that are used with Gatsby are for example:

• Contentful
• Hygraph (formerly GraphCMS)
• WordPress
• drupal
• sanity
• Strapi
• Netify CMS
• Prismic

Furthermore, Gatsby applications can also be generated from Markdown files and therefore also other file formats such as Word files. For small applications you don't necessarily need a CMS.

Popular and modern technologies

From a technical point of view, frontends that are implemented with the Gatsby Framework are based on React.js. React.js is a very popular Javascript framework that has been used to implement many very scalable applications. For example, companies like Facebook, Netflix, Uber, Airbnb and the New York Times rely on React.js.

A big advantage of React.js, in addition to the good tooling for developers, is the large ecosystem. There are numerous free libraries for React.js that can also be used in commercial projects. For example, image galleries, sliders, drag-and-drop elements or PDF generators.

Built-in performance optimization

Through the many available plugins and internal processes, GatsbyJS supports developers in developing extremely high-performance websites and apps. Gatsby relies on a JAM stack architecture. JAM stands for JavaScript, APIs & Markup. In addition to generating static pages, Gatsby automatically optimizes the pages.

Also, Gatsby ensures that elements that negatively affect loading times are automatically improved.

All of this leads to customers often talking about 3x to 10x faster loading times after migrating to Gatsby.

Premium hosting for Gatsby sites with the Gatsby Cloud

Gatsby websites are compatible with many modern hosting providers such as AWS or Netlify, as they do not require a traditional backend server or database. But the best experience is offered by Gatsby Inc. hosting: Gatsby Cloud.

The Gatsby Cloud offers a very fast CDN, preview functions, CI/CD pipelines and other components optimized for Gatsby. Both paid and extensive free plans are available for Gatsby Cloud.

Use Cases for Gatsby

When to use Gatsby in web development

When does it make sense to build a Gatsby site?

The use of Gatsby, primarily, makes sense if you, as a website operator:

• want to get independent of ongoing, technical website updates (such as for plugins)
• want to achieve fast site loads and excellent performance. (Typically, a website built with Gatsby loads significantly faster than a site that rendered on the server side.)
• want to offer the greatest possible protection against hacker attacks
• want to optimize your technical SEO (loading times now have a major impact on search engine ranking)
• have access to developers or an agency who are familiar with React or ideally Gatsby

When to not build a Gatsby site

Gatsby (and Static Site Generators in general) are typically not the best choice when creating an application with very dynamic content. They work great for more static sites, like a company website or blog.

But if you want to implement dynamic web apps, commerce sites or dashboards, for example, then Gatsby might not be the best choice. Instead, you might prefer a server rendered site instead of a static site in these scenarios.

Important: In the newer versions, Gatsby now also offers server-side rendering, so that the implementation of dynamic Gatsby sites and modern apps is now vastly improved.

Headless CMS & Gatsby

Thanks to its powerful API, Gatsby can pull data and content from an exceptionally large number of conten management systems. Even the operation of the blog software Wordpress is possible. However, headless content management systems (CMS) such as Hygraph, Contentful, Sanity or Storyblok are more common.

Depending on the CMS, a variety of integrations are also possible here, such as the integration of a preview mode or a drag-and-drop / WYSIWG editor for creating new pages and content.

Gatsby also offers plugins for many CMS – many developed by the large Gatsby community – which simplify the connection even more. A list of CMS plugins available for Gatsby can be found here: Gatsby Plugin Library | Search 3,000+ plugins

Conclusion

Gatsby is a powerful React-based framework for modern websites and apps. The large ecosystem with its numerous contributors creating plugins, the active Gatsby community, the very stable technical infrastructure and Gatsby Cloud as a hosting platform are a well-rounded package for all companies looking for an up-to-date and scalable platform for their digital project.

Do you need a Gatsby agency?

At Especial, we know Gatsby well. We regularly help our international customers to implement great web & app experiences.

If you require support or free advice regarding Gatsby, please do not hesitate to contact us – either directly via the contact form here on our website, or via hello@especial.digital.