When you’re new to Gatsby there can be a lot of words to learn. This glossary aims to give you a 10,000-foot overview of common terms and what they mean for Gatsby sites.
Abstract Syntax Tree: A tree representation of the source code that is found during a compilation step between two languages. For example, gatsby-transformer-remark will create an AST from Markdown to describe a Markdown document in a tree structure using the Remark parser.
Application Programming Interface: A method for one application to communicate with another. For example, a source plugin will often use an API to get its data.
The inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited for accessibility, generally all users have equal access to information and functionality. Read about Gatsby’s Commitment to Accessibility.
The behind the scenes that the public does not see. This often refers to the control panel of your CMS. These are often powered by server-side programming languages such as Node.js, PHP, Go, ASP.net, Ruby, or Java.
A storage of information locally that might be used again, so computations and lookups can be retrieved faster from one place. Gatsby uses a cache to store information so it can build your site faster when you’re developing without needing to do the same work twice.
Command Line Interface: An application that runs on your computer through the command line and interacted with your keyboard.
Client-side refers to operations that are performed by the user’s browser in a client–server relationship in a computer network. In Gatsby, this is important when working with packages that rely on objects in the browser DOM, such as
navigator. See also: server-side, frontend, and backend.
@reach/router library to enhance HTML pages compiled at build time to navigate site pages in a web browser without traditional page reloads, enabling performance techniques like preloading and pre-fetching, intersection observer and responsive
srcset for images, and more. See also: routing, which is handled on the client-side in Gatsby by default.
Content Management System: an application where you can manage your content and have it saved to a database or file for accessing later. Examples of Content Management Systems include WordPress, Drupal, Contentful, and Netlify CMS.
A text-based interface to run commands on your computer. The default Command Line applications for Mac and Windows are
Command Prompt respectively.
Components are independent and re-usable chunks of code powered by React that, when combined, make up your website or app.
The configuration file,
gatsby-config.ts tells Gatsby information about your website. A common option to set in this config is your site’s metadata that can power your SEO meta tags.
A content delivery network (CDN) is a highly distributed network of servers that stores copies of your content in locations that are closer to your site’s visitors. Content delivery networks improve your site’s performance by reducing the time needed to complete a network request.
Continuous deployment (CD) automates the process of releasing changes to your project. A continuous deployment workflow automatically builds and tests your project, and publishes your changes only when they pass the required tests.
Deferred Static Generation (DSG) is one of Gatsby’s rendering options and allows you to defer non-critical page generation to user request, speeding up build times. Instead of generating every page at build time, you can decide to build certain pages up front and others only when a user accesses the page at run time.
The environment that Gatsby runs in. For example, when you are writing your code you probably want as much debugging as possible, but that’s undesirable on the live website or app. As such, Gatsby can change its behavior depending on the environment it’s in.
Environment Variables allow you to customize the behavior of your app depending on its environment. For instance, you may wish to get content from a staging CMS during development and connect to your production CMS when you build your site. With environment variables you can set a different URL for each environment.
The way files are organized. With Gatsby, it means having files in the same place as your website’s or app’s code instead of pulling data from an external source. Common filesystem usage in Gatsby includes Markdown content, images, data files, and other assets.
A markup language that every web browser is able to understand. It stands for Hypertext Markup Language. HTML gives your web content a universal informational structure, defining things like headings, paragraphs, and more. It is also key to providing an accessible website.
The practice of using JSON returned from the WordPress REST API as a headless CMS. It allows you to use WordPress to write and edit content that can be consumed by any client capable of parsing JSON.
A feature in use when you run
gatsby develop that live updates your site on save of code in a text editor by automatically replacing modules, or chunks of code, in an open browser window. Gatsby uses Fast Refresh.
As part of its data layer and build process, Gatsby will automatically infer a schema, or type-based structure, based on available data sources (e.g. Markdown file nodes, WordPress posts, etc.). More control can be gained over this structure by using Gatsby’s Schema Customization API.
Infrastructure as Code is the practice of using configuration files and scripts to automate the process of setting up your development, testing, and production environments.
Linting is the process of running a program that will analyze code for potential errors. The Gatsby project uses prettier to identify and fix common style issues. Another example of a linter commonly used in React projects is eslint-plugin-jsx-a11y, which checks for common accessibility issues in development.
A way of writing HTML content with plain text, using special characters to denote content types such as hash symbols for headings, and underscores and asterisks for text emphasis.
An HTML page.
Something that automatically happens based on your code and configuration. For example, you might configure your project to create a page for every blog post written, or read and display the current year as part of a copyright in your site footer.
This usually refers to either a member of the public (as opposed to your team) or the folder
/public in which your built website or app is saved.
The process of requesting specific data from somewhere. With Gatsby you normally query with GraphQL.
Generally speaking React server components allow developers to build apps that span the server and client. Server Components can dynamically choose which client components to render, allowing clients to download just the minimal amount of code necessary to render a page. Gatsby leverages this capability for its Partial Hydration feature. Watch the talk “Data Fetching with Server Components” or read the Server Components RFC to learn more.
Routing is the mechanism for loading the correct content in a website or app based on a network request - usually a URL. For example, it allows for routing URLs like
/about-us to the appropriate page, template, or component.
An exact representation of how data is stored in a system, such as tables and fields in a database or a JSON file structure. In Gatsby, the GraphQL schema expresses all queryable data - or data that components can ask about as part of Gatsby’s data layer.
The server-side part of the client-server relationship refers to operations performed by a computer program which manages access to a centralized resource or service in a computer network. See also: frontend and backend.
Gatsby builds static versions of your page that can be easily hosted. This is in contrast to dynamic systems in which each page is generated on-the-fly. Being static affords major performance gains because the work only needs to be done once per content or code change.
A software application that creates HTML pages from templates or components and a given content source.
A Gatsby theme is like a WordPress theme that is composable (with other themes), extendable (with more logic), and replaceable (shadowing). Gatsby themes can have any facet of a Gatsby app packaged inside of them, and can also offer any number of knobs to turn features on or off.
A UI refers to a User Interface. In the field of human-computer interaction, a UI is a space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, while the machine simultaneously feeds back information that aids the user’s decision-making process (such as error messages or notifications).
A WordPress plugin that adds GraphQL capabilities to WordPress. It’s another way that you can use WordPress as a content source for Gatsby.