My Blog

Category: Uncategorized

  • Loading Configured Plugins

    Among the very first steps performed in Gatsby’s bootstrap is loading all the plugins configured in gatsby-config.js, as well as internal Gatsby plugins that come with the core framework. Gatsby saves these loaded plugins to Redux using the flattened​Plu⁠gins namespace. In Redux, each plugin has the fields listed in Table 14-1. NOTE For more information about how Gatsby leverages Redux for data storage, consult…

  • APIs and Plugins in Gatsby

    When you invoke an API or plugin within Gatsby itself or in a plugin you’ve provided to the implementation, what does Gatsby do on the inside? In this section, we’ll take a brief tour through the major phases of API and plugin execution in Gatsby from the standpoint of gatsby-node.js. An understanding of what portions of…

  • Gatsby Internals

    Throughout this book, we’ve taken a tour through the compelling set of features available to developers building Gatsby sites. And in the previous section, we explored advanced topics in Gatsby for expert-level use cases that go well beyond its out-of-the-box capabilities. But what about those who are interested in contributing to Gatsby, extending it, or…

  • Conclusion

    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…

  • Conditional Page Builds

    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…

  • Performance Tracing for Gatsby Builds

    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…

  • Profiling with React Profiler

    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

    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…

  • Adding a Progressive Web App Manifest File

    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…

  • Caching Gatsby Sites

    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…