Gatsby: The Definitive Guide

Chapter 3. Adding Features to Gatsby Sites

Now that you’re equipped with an understanding of Gatsby fundamentals and core elements, including the Gatsby CLI, starters, pages, components, CSS, and plugins, we can direct our attention to how to introduce and implement certain key features that are common on websites.

In this chapter, we’ll take a brief detour from the conceptual underpinnings of Gatsby to focus on real-world use cases and requirements that many Gatsby developers encounter when developing websites. Adding critical features to Gatsby sites such as analytics, authentication, and form handling will help you hone your React and Gatsby skills. In this chapter, we’ll build a basic Gatsby site with all of these features, putting what you’ve learned so far to use.

Pages and Routing in Gatsby

One of the primary selling points of Gatsby is that it is an SSG, as we discussed in Chapter 1. Nonetheless, thanks to Gatsby’s dependency on React, a library for building interactive UIs, Gatsby sites can blur the line between static sites and more dynamic applications. This is a general trend in websites today, with dynamic forms and dynamic search becoming more common than search features and contact forms that require a full-page refresh, and Gatsby follows suit. Once a static rendering of the site is made available to the browser, Gatsby passes the baton to React, which performs all further dynamic or asynchronous operations that need to occur to decorate and enrich the static ...