Sam tells Ryan about his experience setting up an in-browser code editor with CodeMirror that he plans on using for blog posts and code recipes, as well as what he thought about using Radix Themes for the first time in earnest on a side project of his currently styled with Tailwind.

Topics include:

• 0:00 - Intro
• 4:01 - Building an authoring tool with CodeMirror
• 18:47 - Refactoring Tailwind to Radix Themes

Links:

• CodeMirror
• Sam’s YouTube video on Radix Themes
• Radix Themes docs

Sam and Ryan talk about why it’s better to think of throw as a general-purpose JavaScript language feature rather than something that should only be used for error handling. They discuss the ambiguity around the phrase “error handling”, situations that call for dealing with errors locally vs. globally, and how throw can be useful for non-error control flow. They also discuss the problems with trying to shoehorn dynamic features into a static site.

Topics include:

• 0:00 - Intro
• 4:07 - Error handling vs. throw-try/catch
• 23:34 - Errors vs. Exceptions
• 31:52 - How Next.js uses throw for non-error control flow
• 40:44 - Adding a dynamic feature to a static site

Links:

• Global progress in Next.js
• What color is your function

Sam and Ryan discuss the core values of the Next.js framework, and how those values motivate several of the framework’s design decisions. They talk about caching, why layouts don’t have access to the URL, and why the router doesn’t expose navigation events, as well as how developers should think about extending Next’s functionality with their own application code.

Topics include:

• 0:00 - Intro
• 2:58 - Why don’t layouts re-render in Next.js?
• 7:10 - Push-based vs. pull-based rendering
• 8:56 - Thinking about re-renders in a pure React app
• 11:07 - Why Server Actions need to call the revalidate* APIs
• 12:26 - Why doesn’t Next.js pass the request to every page and layout?
• 31:40 - Immediate-mode rendering vs. “Do the least amount of work possible”
• 51:54 - Is opting-in to more re-renders framework fighting?
• 53:44 - Helping users by communicating the philosophy
• 56:25 - Why doesn’t Next.js expose global router events?
• 1:00:17 - Why it’s important to understand Next’s design decisions when choosing it for your next project

Sam talks to Ryan about refactoring an MDX blog post to a React Server Component. They discuss how RSC’s ability to render server-side content with “client-side holes” turns out to replace MDX for many uses cases. They also talk about other tools that are (surprisingly) a conceptual subset of the RSC architecture, such as custom Webpack loaders.

Topics include:

• 0:00 - Intro
• 5:05 - The Next.js happy path for MDX: Local files
• 11:15 - Exploring remote MDX content with mdx-remote
• 14:46 - Separating the serializable parts of MDX from the runtime imports
• 17:13 - Realizing that RSC covers the same problem space, and ditching MDX
• 26:50 - Exploring other APIs and plugin ecosystems that RSC could replace: Webpack loaders, next/image, and Liquid templates
• 32:11 - React’s vision for RSCs
• 35:18 - How RSCs could replace build-time plugin APIs
• 44:51 - Replacing MDX with Markdoc, Shiki, and custom node code during render

Links:

• Markdoc
• Shiki

Sam and Ryan read and discuss the latest update from React Labs.

Topics include:

• 0:00 - Intro
• 5:26 - Opening
• 6:18 - React Compiler
• 27:27 - Actions
• 51:44 - Asset loading
• 1:13:06 - Next Major Version of React
• 1:15:42 - Activity

Links:

• React Labs blog post
• Sam’s video on Strict Mode

Sam and Ryan discuss the intuition behind React Transitions, and why React’s new useOptimistic hook is a good fit for building a URL-driven filter panel that stays fully responsive to client interactions.

Topics include:

• 0:00 - Intro
• 1:12 - The problem: In a world of Server Components, URL updates are blocked by a server-side roundtrip
• 10:44 - Attempted solution: Use the browser’s Native History API (history.pushState)
• 15:03 - Realization: The source of truth flips from server to client during the transition – which is exactly what useOptimistic was designed for
• 17:54 - Unwinding our mental model of client-first React apps by thinking about how HTML-only checkout forms work
• 21:44 - The intuition behind React Transitions, and how they put our UI into a state of preparation
• 30:39 - How Transitions improve upon default browser behavior by keeping our current UI 100% responsive, and how useOptimistic solves the checkbox filter panel
• 37:46 - Ryan’s take: It’s a bonus when tools make you feel smart, but it’s more important for them to not make you feel dumb

Ryan and Sam discuss the purpose and usage of the useOptimistic() hook, a new experimental API from React.

Topics include:

• 0:00 - Intro
• 2:18 - Problem: RSCs require a server roundtrip before the UI can be updated
• 10:13 - Solution: useOptimistic() lets you merge ephemeral client-side state with server-side data so you can update the UI during a Server Action or Transition
• 14:03 - How useOptimistic() avoids the notion of identity by discarding the ephemeral state after the app settles
• 21:17 - How useOptimistic() lets you safely “fork” state that eventually syncs with the server
• 27:32 - Handling error states
• 29:26 - Differences between useOptimistic() and Remix fetchers
• 34:57 - How useOptimistic() lets you avoid managing a long-lived client-side cache

Links:

• Ryan’s useOptimistic tweet
• Ryan’s video on React Cache: Part 2

Ryan and Sam discuss the purpose and usage of the cache() function, a new experimental API from React.

Topics include:

• 0:00 - Intro
• 2:29 - Caching in Next.js vs. React cache()
• 8:11 - Why React invalidates the cache for each server request
• 14:43 - How cache() enables colocation of data-fetching code
• 16:14 - Using cache() to share CPU-heavy or I/O-bound tasks between components
• 19:31 - Why cache() obviates the need for context in Server Components
• 23:19 - The danger of module scope on the server
• 27:54 - Why cache() is implemented with AsyncLocalStorage
• 41:04 - Why cache() is part of React
• 48:27 - Why Server Components don’t support cache()
• 53:04 - How cache() eliminates waterfalls

Links:

• Ryan’s YouTube video on React Cache

Sam and Ryan talk about Advanced Radix UI, Build UI’s newest course. They also read and discuss a blog post that describes the RSC architecture in terms of two processes: React Server and React Client.

Topics include:

• 0:00 - Intro
• 0:49 - Ceilingless libraries + Advanced Radix UI
• 21:02 - Read and discuss: “RSC is React Server + Component”

Links:

• Advanced Radix UI course
• Radix UI
• RSC is React Server + Component

Ian Landsman & Aaron Francis join Sam to discuss React Server Actions & Server Components, why it's important to have one set of opinions, and yes, the infamous SQL Injection Slide at NextConf.

This is a crossover episode with the excellent podcast Mostly Technical.

Topics include:

• 0:00 - The Most Memed Man on the Internet
• 09:06 - High Floor vs. High Ceiling
• 19:20 - What the Hell Is Next?
• 23:22 - The Third Phase of React
• 29:09 - Your App Is Not Unique
• 35:23 - Server Actions & Server Components
• 51:33 - CallYourMom.Com
• 01:00:56 - Fat Models, Skinny Controllers
• 01:14:16 - One Set of Opinions

Links:

• Sam’s Next.js Conf talk
• React is a programming language for UIs

Sam and Ryan talk about the key parts of Remix’s architecture in the context of the Work Journal app from Build UI’s latest course. They discuss how Remix’s conventions around Links, Forms, Actions, and Loaders allow developers to eliminate boilerplate and take advantage of the best HTTP has to offer, while still providing a seamless way to enhance their UIs using the full power of client-side React.

Topics include:

• 0:00 - Intro
• 0:31 - The Work Journal app
• 2:20 - Making dynamic pages with Loaders
• 8:00 - How Remix relies on HTTP for routing
• 12:30 - Making backend changes using Forms and Actions
• 19:41 - How Remix’s comprehension of Loaders and Actions eliminates boilerplate
• 25:20 - How Remix layers the full power of React on top of web fundamentals

Links:

• Sign up for the Build UI Newsletter
• Video on HTTP Session Cookies