What React 18+ Unlocks for Gatsby
summary
React 18 enables Gatsby to start rendering in async mode so queries can suspend on the server and hydrate selectively; a new useQuery hook replaces page/static queries allowing variables and falling back to Suspense instead of an isLoading flag. Hybrid routes use underscore layout.js and page fragments so changing a header updates one fragment instead of rebuilding millions of pages. Server components promise up to ~90% less client JS for marketing pages. Demo: install react@next + react-dom@next and Suspense renders Pikachu data into HTML with no fallback.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 0:40Concurrent features in React 18
- 1:43Impact on Core Web Vitals
- 2:45Suspend boundaries and hydration
- 3:36StartTransition for responsiveness
- 4:45Query hook replaces page queries
- 6:29Hybrid routes and layouts
- 8:36Static and dynamic page blending
- 9:20Server components potential
- 11:06Using React 18 with Gatsby today
- 12:10Demo of React Suspense in Gatsby
related talks
19mAll About React 18
10mServer Rendering & Suspense, Hydration Improvement
59mReact in 2024: Exploring the New Stuff
17mState of React 2022
40mReact Rendering Strategies Panel Discussion
31mReact Server Components Elevating Speed, Interactivity, and User Experience
18mExploring React 18's Streaming Capabilities with Suspense for SSR
13mReact Actions and JSX Improvements