Category: 13. Advanced Topics In Gatsby

In this section, we covered a slew of advanced topics that ran the gamut from IaC with Gatsby recipes and schema customization to expert configuration and performance optimization. Though Gatsby comes equipped with many defaults that suit the vast majority of Gatsby sites, sometimes developers require more flexibility to handle more nuanced requirements or to…

One of the key differences between Gatsby v2 and Gatsby v3 is the new stability of conditional page builds, also known as incremental builds. In Gatsby v2, this experimental functionality was made available by enabling the GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES environment variable. The core capability of conditional page builds is the ability to regenerate only those static HTML files that need…

Profiling can give you a significant amount of information about the React side of the equation, but performance tracing to see what takes the longest during Gatsby builds is important as well. Gatsby provides performance tracing capabilities compatible with the OpenTracing standard that can be viewed in an introspection tool such as Zipkin, Jaeger, or Honeycomb. The instrumentation in Gatsby’s code…

As of React 16.5, React now includes support for profiling, which is a means of capturing information with timings that assist Gatsby developers in pinpointing performance issues within a given Gatsby site. Users of React Developer Tools can access a Profiler tab to diagnose issues, and Gatsby automatically enables profiling in development, though development profiling does not…

Adding offline support with service workers is another way to improve performance, particularly because service worker usage is a PWA requirement. The gatsby-plugin-offline plugin automates the process of transforming a Gatsby site into an offline-first implementation that is resistant to inconsistent network conditions with the help of a service worker. Service workers, in short, are scripts executed in the background…

Progressive web apps (PWAs) are websites that can run in the browser but also leverage certain functionality to provide native application–like advantages. For those Gatsby developers who wish to enable their Gatsby sites as PWAs, the most important step is to add a manifest file, manifest.webmanifest, that indicates PWA compatibility. The gatsby-plugin-manifest plugin can create a manifest file on your…

One of the foundational best practices for Gatsby static sites is to perform proper HTTP caching, which enables browsers to optimally cache resources from a given website such that the user experiences a near-instantaneous load. The Gatsby documentation outlines several types of resources in the public directory that should be cached (or not) according to a particular set…

The topic of performance is a broad one, and this app cannot possibly do it justice. But fortunately, Gatsby includes many performance enhancements that ensure a high-performing Gatsby site with little to no additional work. For instance, Gatsby comes prepackaged with common modern paradigms for performant websites such as link prefetching, code splitting, and other techniques.…

The final portion of this section deals with proxying API requests, which involves customizing the Gatsby configuration file. Many Gatsby developers employ an architectural approach that involves hosting the backend server implementation and frontend React application from the same host and port, which can lead to issues when sourcing data for presentation in Gatsby, as some…

ESLint is a powerful open source utility for JavaScript aimed at detecting malformed syntax using a type of static analysis known as code linting. Due to JavaScript’s loosely typed and dynamic nature, the language is prone to syntax errors committed by developers. ESLint allows developers to run tests across their code without executing the logic. As with…