Gatsby Detector

How can you detect if a website uses Gatsby by looking at the source code?

Detecting whether a website uses Gatsby involves identifying specific markers characteristic of Gatsby applications.

Here’s a step-by-step guide on how to do it:

1. Open the Page Source: Right-click on the webpage and select “View Page Source” or press Ctrl+U (Windows) or Cmd+Option+U (Mac) to open the page’s source code.
2. Look for the Gatsby Identifier: Search for the unique identifier that indicates the use of Gatsby. Use Ctrl+F (Windows) or Cmd+F (Mac) to open the search function and look for:
   • id="___gatsby": This is a common element found in all Gatsby applications, indicating that the website is using Gatsby.
3. Check for Script References: Look for references to Gatsby-related scripts. These can indicate the presence of Gatsby on the site. Search for:
   • gatsby: Look for scripts that reference Gatsby in their URLs, such as: <script src="/static/d/xxxx/gatsby-script.js"></script>.
4. Look for Data Attributes: Gatsby often uses specific data attributes in its components. Check for attributes like:
   • data-gatsby: This attribute can sometimes be found on various elements within the page structure.
5. Search for Page Queries: Gatsby uses GraphQL for data fetching. Although these queries may not be visible in the page source, you can look for comments or snippets that might indicate a GraphQL query structure. For example:
   • graphql: See if there are any references in the source code or comments that resemble a GraphQL query.
6. Look for Preloaded Links and Routes: Gatsby preloads pages for optimized loading. You might find related attributes like:
   • rel="preload" or as="script": These attributes are often used with links to improve performance.
7. Check for Static Query Usage: If you come across static queries in the source code (mostly in comments), they may indicate Gatsby usage. Look for patterns like StaticQuery in comments or code snippets if available.