Hasty Treat - Gatsby Tips

Episode Summary

Executive Summary: The episode is a practical roundup of Gatsby tips from Scott and Wes, focused on speeding up development, improving SEO, handling layouts and animations, using Gatsby’s hooks effectively, and avoiding unnecessary complexity. The hosts emphasize Gatsby’s flexibility, the value of learning its APIs, and strategies for troubleshooting and optimizing production builds.

Main Topics: Reusable SEO component with React Helmet: Wes recommends building a shared SEO component that centralizes default metadata, Open Graph/Twitter tags, title templates, and allows page-specific overrides. Restarting and cleaning Gatsby builds when things break: The hosts stress that Gatsby can get into odd states due to caching or plugin/config issues, so cleaning the cache or restarting the build often resolves problems. Using ES modules and sharing code across Gatsby files: Wes advocates using ESM throughout the project, including in Gatsby Node/config files, to reduce friction and share code more easily despite Node’s CommonJS defaults. Running production builds locally before deploy: Scott recommends building and serving the site locally to catch Node/build-time issues before pushing to hosting platforms like Netlify. Layouts, wrapPageElement, and page-specific wrapping: The discussion covers Gatsby SSR/browser hooks for automatic layout wrapping, but also suggests manually wrapping layouts when only some pages should include shared UI. Animations and page transitions in a mount/unmount environment: Scott explains that Gatsby’s routing can complicate animations because pages mount/unmount, so transitions should be orchestrated from persistent wrappers rather than isolated page components. Using Gatsby hooks and avoiding unnecessary data querying: Wes highlights onCreatePage for passing context and argues that not everything needs to be queried—hard-code static content when appropriate and avoid adding CMS overhead unnecessarily.

Key Arguments: Centralizing SEO metadata in one reusable component reduces duplication and makes page-level overrides easier. Gatsby’s caching can cause strange build behavior; cleaning the cache or restarting is often the quickest fix. Writing ESM across Gatsby project files improves code sharing and consistency despite Node’s CommonJS defaults. Production builds should be tested locally because many issues are Node/runtime problems, not hosting issues. Layout handling in Gatsby is flexible: automatic wrapping is convenient, but manual wrapping is better for pages that should omit global UI. Animations need to account for Gatsby’s unmount/remount routing model and should be controlled from persistent wrappers. Developers should use Gatsby hooks like onCreatePage for contextual logic and avoid querying or CMS usage when static code is simpler. For image-heavy sites, offloading image processing can dramatically improve build times.

Data Points: LogRocket free trial: 14 days - Sponsor offer mentioned at the start: logrocket.com/syntax Gatsby Parallel Runner offload: Google Cloud - Wes says it offloads image generation to Google Cloud to speed up builds Speaker experience with Gatsby: 1 of the first Gatsby courses on YouTube - Scott says he created one of the earliest Gatsby courses on YouTube Site type guidance: No CMS/backend needed for static content - The hosts argue for hard-coding content when it rarely changes or doesn’t need editing

Pivotal Quotes: "when in doubt, stop the build and restart" — Wes: Advice for resolving Gatsby build/config/plugin issues caused by caching or stale state "I just had the whole layout twice. And I was like, that would have never have worked in WordPress land" — Wes: Illustrates Gatsby’s flexible component-based layout model and composability "do not forget to run the build and then serve the build locally as a production build before deploying" — Scott: Recommendation to catch production-only issues early, especially Node/runtime problems

Implications: Listeners should treat Gatsby as a flexible but build-sensitive system: learn its APIs, test production locally, centralize repeated logic, and use hooks/layouts strategically. These practices reduce bugs, improve performance, and make Gatsby sites easier to scale.