Frontend First

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

Ryan continues to share the details behind his custom RSC implementation. He talks with Sam about how Server Actions allow the client to reference server-side code (in the same way client components allow the server to reference client-side code), how Server Actions are bundled and invoked, and the security concerns associated with blurring the lines between the server and the client.

Topics include:

• 0:00 - Intro
• 0:52 - Ryan’s course on React Server Components
• 3:06 - Motivating Server Actions, how to bundle them, and how to invoke them
• 27:38 - Sending arguments via hidden inputs or closures, and security concerns

Links:

• Ryan’s React Server Components course

Ryan shares how building his own RSC implementation from scratch helped him better understand React’s new paradigm. He and Sam talk about how a client React app can fetch an RSC Payload from a server endpoint to update the UI, how an RSC server renders and bundles Client code that’s part of a Server Component tree, and how a client-side Router can be used to fetch new RSC trees based on the URL.

Topics include:

• 0:00 - Intro
• 2:48 - Making a server endpoint that a client React app can use to re-render the UI
• 15:42 - How the bundling step shims Client Components during a server render with a reference that the client app can later use to execute browser code
• 35:16 - How the React Component API unifies server and client functionality in a single composable interface
• 38:54 - How a client-side router can render different server trees based on the URL
• 49:09 - Reference projects used

Links:

• Simple RSC
• Tangle
• Vite RSC
• Next.js

Ryan and Sam talk about how to invalidate Next.js’ client-side cache when a different session makes changes to backend data, and ultimately discuss whether clicking a link to a URL vs. hitting refresh on that same URL should render the same page if no backend data has changed.

Topics include:

• 0:00 - Intro
• 1:00 - Suspense boundary identity and the Await component
• 11:07 - How to refresh RSC using a Server Action
• 27:17 - The difference between a navigation and a page refresh

Links:

• Ryan’s Data Fetching with RSC course
• Refresh App Router code recipe