> Canonical URL: https://codingcat.dev/podcast/2-8-powering-up-with-gatsby-4-and-gatsbyconf

# Powering up with Gatsby 4 and GatsbyConf

🎧 Podcast Episode · S2E8February 23, 2022[![](/logos/tags/graphql-symbol-light.svg)![](/logos/tags/graphql-symbol-dark.svg)GraphQL](/topic/graphql)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)[![](/logos/tags/nextjs-symbol-light.svg)![](/logos/tags/nextjs-symbol-dark.svg)Next.js](/topic/nextjs)[![](/logos/tags/builder-io-symbol-light.svg)![](/logos/tags/builder-io-symbol-dark.svg)Builder.io](/topic/builder-io)[![](/logos/tags/webdev-symbol-light.svg)![](/logos/tags/webdev-symbol-dark.svg)WebDev](/topic/webdev)

# Powering up with Gatsby 4 and GatsbyConf

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/54febe02a16971901582bbe5a6ec7aa89968d7b0-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=uYP2GKOQvIs&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Grayson Hicks](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/aa46f81af46be15eb4c6372375c438a1c900cbd8-247x247.jpg?w=96&h=96&q=82&fit=max&auto=format)Grayson Hicks](/guest/grayson-hicks)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/13LS987IGxdrpgpxi7Ixks)[Apple](https://podcasts.apple.com/us/podcast/2-8-powering-up-with-gatsby-4-and-gatsbyconf/id1491655542?i=1000566524866)[YouTube](https://www.youtube.com/watch?v=uYP2GKOQvIs&list=PLUKgAjyG9B0ZhUEXp9eVa7h4L__FDW3uV)[Subscribe on YouTube (62.5K / 100K) →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Pocket Casts](https://pca.st/episode/2660a2ee-9c33-4daf-be59-04d023677d16)[Castbox](https://castbox.fm/episode/id2508485-id505139927)[Castro](https://castro.fm/episode/HGz8iH)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)

## Episode Sponsors.

[![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/e355e7e90e37726637596011069c154ae515da9f-1200x675.png?w=1200&q=82&fit=max&auto=format)Partner & Sponsor

### Builder.io

Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provide whole-team autonomy with a platform that is developer approved.](https://www.builder.io/?utm_source=codingcatdev)

**Powering up with Gatsby 4 and GatsbyConf ** is a CodingCat.dev podcast episode featuring Grayson Hicks alongside Alex Patterson and Brittney Postma focused on GraphQL, React, Next.js. Grayson Hicks joins us to talk all about Gatsby 4 and multiple methods of rendering. Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=uYP2GKOQvIs) or explore the architectural notes, chapters, and official documentation links below.

## Questions

- Tell us about yourself and how you found your way onto team Gatsby?
- Gatsby version 3 was released in March 2021, was there so much that changed by October 2021 that you needed a new version? [https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/)
- What is new with Gatsby 4? [Parallel Query Running](https://www.gatsbyjs.com/docs/reference/release-notes/v4.0/#parallel-query-running) - up to 40% reduction in build times
- [Deferred Static Generation (DSG)](https://www.gatsbyjs.com/docs/reference/release-notes/v4.0/#deferred-static-generation-dsg) - defer page generation to user request, speeding up build times
- [Server-Side Rendering (SSR)](https://www.gatsbyjs.com/docs/reference/release-notes/v4.0/#server-side-rendering-ssr) - pre-render a page with data that is fetched when a user visits the page

- Data later, why GraphQL and will there be an option for rest?
- What build tools is Gatsby looking at for builds?
- [GatsbyConf](https://gatsbyconf.com/) is March 2nd & 3rd, 2022, high level what can we expect?

## Technical Overview: Powering up with Gatsby 4 and GatsbyConf

2.8 - Powering up with Gatsby 4 and GatsbyConf: Grayson Hicks joins us to talk all about Gatsby 4 and multiple methods of rendering. https://codingcat.dev/podcast/2-8-powering-up-with-gatsby-4-and-gatsbyconf Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provid

When applying the concepts from **Powering up with Gatsby 4 and GatsbyConf**  in a production codebase, teams working with GraphQL, React, Next.js, Builder.io should align their implementation with the [**GraphQL Official Specification & Learn**](https://graphql.org/learn/) (Schema design, resolvers, queries, mutations, and federation). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.

### Key Engineering Takeaways

- **Core Topic Focus: ** Practical strategies for GraphQL, React, Next.js, Builder.io covered in "Powering up with Gatsby 4 and GatsbyConf" (Grayson Hicks joins us to talk all about Gatsby 4 and multiple methods of rendering.).
- **Production Implementation: ** Combine the architectural patterns demonstrated in this podcast with the official [GraphQL Official Specification & Learn](https://graphql.org/learn/) for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: ** Follow along with the live coding demos and discussion on [YouTube (Powering up with Gatsby 4 and GatsbyConf)](https://www.youtube.com/watch?v=uYP2GKOQvIs) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives.

## Video Chapters & Timestamps

Jump directly to any segment of [**Powering up with Gatsby 4 and GatsbyConf**](https://www.youtube.com/watch?v=uYP2GKOQvIs) on YouTube using the timestamped chapters below:

- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): AM (EST)
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Gatsby Conf Intro
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Intro
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Grayson Intro
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Did you do Open Source at Gatsby before you worked there?
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Gatsby swag
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Gatsby 4
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Builder.io Ad
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Release notes - https://www.gatsbyjs.com/docs/referece/release-notes/v4.0/
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Deferred static generation - https://www.gatsbyjs.com/docs/reference/release-notes/v4.0/#deferred-static-generation-dsg
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): SEO questions
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): SSR availability
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Sam Bhagwat epidsode - https://codingcat.dev/podcast/1-16-delivering-a-content-mesh
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Why choose GraphQL and is there a possibility for REST in the future?
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Developer Tooling and Build chain
- [**00:00**](https://www.youtube.com/watch?v=uYP2GKOQvIs&t=0s): Server components React 18

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Powering up with Gatsby 4 and GatsbyConf Full Video](https://www.youtube.com/watch?v=uYP2GKOQvIs) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **builder.io: ** [https://Builder.io](https://builder.io/?utm_source=codingcatdev)
- **:40 - Release notes: ** [https://www.gatsbyjs.com/docs/referece/release-notes/v4.0/](https://www.gatsbyjs.com/docs/referece/release-notes/v4.0/)
- **:00 - Sam Bhagwat epidsode: ** [https://codingcat.dev/podcast/1-16-delivering-a-content-mesh](/podcast/1-16-delivering-a-content-mesh)
- **Show Pick: ** [Halo Infinite (picked by Alex Patterson)](https://www.xbox.com/en-US/games/halo-infinite)
- **Show Pick: ** [11ty 1.0 (picked by Alex Patterson)](https://www.11ty.dev/blog/eleventy-one-point-oh/)
- **Show Pick: ** [Syntax Gatsby v4 (picked by Brittney Postma)](https://syntax.fm/show/415/gatsby-v4)
- **Show Pick: ** [EnterJS (picked by Brittney Postma)](https://enterjs.de/lecture.php?id=13859&source=0)
- **Show Pick: ** [Zelda Breath of the Wild (picked by Grayson Hicks)](https://www.nintendo.com/games/detail/the-legend-of-zelda-breath-of-the-wild-switch/)
- **Show Pick: ** [Node.js 17 (picked by Grayson Hicks)](https://nodejs.org/en/blog/release/v17.0.0/)
- [**Grayson Hicks Guest Profile & Episodes on CodingCat.dev**](/guest/grayson-hicks)
- [**Grayson Hicks on GitHub**](https://github.com/graysonhicks)
- [**Episode Sponsor: Builder.io**](https://www.builder.io/?utm_source=codingcatdev)
- [**GraphQL Official Specification & Learn:**](https://graphql.org/learn/) Schema design, resolvers, queries, mutations, and federation
- [**React Official Reference:**](https://react.dev/reference/react) Hooks, Server Components, and UI state patterns
- [**Next.js Official Documentation:**](https://nextjs.org/docs) App Router, Server Actions, and rendering architecture guides

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Revealing all of Next.js 12's Features**](/podcast/1-46-revealing-all-of-next-js-12-s-features): We sit down with Lee Robinson, Head of Developer relations at Vercel, to talk all about Next.js 12.
- [**Using No-Code with Builder - Part 1**](/podcast/2-1-using-no-code-with-builder-io-part-1): In this first part Alex sits down with Steve Sewell to understand how http://builder.io/ is different from other no-code solutions.
- [**Reviewing Next.js 11 features with Tim Neutkens**](/podcast/1-36-reviewing-nextjs-features-with-tim-neutkens): We sit down with Tim to talk about how he got started with Next.js and what things are upcoming in Next.js 11.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Powering up with Gatsby 4 and GatsbyConf?

Grayson Hicks joins us to talk all about Gatsby 4 and multiple methods of rendering. 2.8 - Powering up with Gatsby 4 and GatsbyConf: Grayson Hicks joins us to talk all about Gatsby 4 and multiple methods of rendering. https://codingcat.dev/podcast/2-8-powering-up-with-gatsby-4-and-gatsbyconf Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provid Throughout this podcast, Grayson Hicks breaks down real-world implementation details for GraphQL, React, Next.js so developers can apply these patterns directly in production.

### How do you implement GraphQL best practices in production?

When adopting GraphQL and React in a production stack, start by validating your configuration against the [**GraphQL Official Specification & Learn**](https://graphql.org/learn/) (Schema design, resolvers, queries, mutations, and federation). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Powering up with Gatsby 4 and GatsbyConf walkthrough and find related code resources?

You can watch the complete video session for [**Powering up with Gatsby 4 and GatsbyConf**](https://www.youtube.com/watch?v=uYP2GKOQvIs) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into GraphQL, check out our related guide: [**Revealing all of Next.js 12's Features**](/podcast/1-46-revealing-all-of-next-js-12-s-features).

## ✏️ Episode Summary

2.8 - Powering up with Gatsby 4 and GatsbyConf: Grayson Hicks joins us to talk all about Gatsby 4 and multiple methods of rendering.

https://codingcat.dev/podcast/2-8-powering-up-with-gatsby-4-and-gatsbyconf

Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experiences on your sites and apps. Provid

✏️ Visual Architecture Diagram

## how this episode connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Powering up with Gatsby 4 and GatsbyConf✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Powering up with Gatsby 4 and GatsbyConf: start with Grayson Hicks, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

## episode picks.

### 🐾 Alex Patterson

- [Halo Infinite](https://www.xbox.com/en-US/games/halo-infinite)
- [11ty 1.0](https://www.11ty.dev/blog/eleventy-one-point-oh/)

### 🐾 Brittney Postma

- [Syntax Gatsby v4](https://syntax.fm/show/415/gatsby-v4)
- [EnterJS](https://enterjs.de/lecture.php?id=13859&source=0)

### 🐾 Grayson Hicks

- [Zelda Breath of the Wild](https://www.nintendo.com/games/detail/the-legend-of-zelda-breath-of-the-wild-switch/)
- [Node.js 17](https://nodejs.org/en/blog/release/v17.0.0/)

## related episodes.

[All Episodes→](/podcasts)[![The Firebase plugin is now available in Codex: Web Architecture & Implementation Guide](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/4e2c8e99f437cb576972d406ec32394a82a19480-1200x630.svg?w=1200&q=82&fit=max&auto=format)](/post/firebase-2026-09-firebase-plugin-for-codex)September 29, 2026[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)

### [The Firebase plugin is now available in Codex: Web Architecture & Implementation Guide](/post/firebase-2026-09-firebase-plugin-for-codex)

Alex Patterson's hands-on web engineering breakdown of "The Firebase plugin is now available in Codex" (2026-09-28). Learn how to wire up Firebase, Google Cloud, Web Dev, AI in production web apps.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![The Odin Project 6: Modern React 19, State Architecture & TypeScript](https://cdn.sanity.io/images/hfh83o0w/production/638109d3eb8a895902f71dbb25851fa9c1ddbc69-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-modern-react-and-typescript)November 4, 2026[![](/logos/tags/astro-symbol-light.svg)![](/logos/tags/astro-symbol-dark.svg)Astro](/topic/astro)[![](/logos/tags/react-symbol-light.svg)![](/logos/tags/react-symbol-dark.svg)React](/topic/react)

### [The Odin Project 6: Modern React 19, State Architecture & TypeScript](/course/odin-modern-react-and-typescript)

Master React 19 components, strict TypeScript props, derived state vs. useEffect traps, Server Actions, and island hydration in Astro.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)