Frontend First

Tim joins Sam to talk about his work on the new app router in Next.js 13. He explains how the app router leverages Server Components and React’s new cache API to bring a new level of composability to server-side code, how Server Actions are being designed to enable partial revalidation in a single round trip to the server, and how to think about UI updates as a result of server-side state changes.

Topics include:

• 0:00 - Intro
• 2:53 - Rendering Server Components and the RSC payload
• 21:49 - Composition vs. top-down data flow and the React cache
• 53:35 - Revalidation after a user event and Server Actions
• 1:06:37 - Revalidation after a server-side state change
• 1:14:02 - Back and forward navigation
• 1:21:43 - Caching layers
• 1:30:53 - Current focus on stability, performance, education, and TurboPack

Links:

• Tim’s deep dive on caching and revalidating
• Next.js docs on Caching

Sam and Ryan discuss how TypeScript helped them understand the mechanics of how props get passed from Server Components to Client Components, and how to properly type client component props if the prop starts out as a rich data type on the server. They also clarify some points from last episode’s discussion about the RSC payload.

Topics include:

• 0:00 - Intro
• 0:40 - Clarifying what the RSC Payload actually is
• 10:12 - Understanding prop serialization when passing props from Server Components to Client Components
• 23:38 - How to define TypeScript types for serialized props, and Remix’s SerializeFrom helper

Links:

• Ryan’s RSC course on Build UI

Sam and Ryan explore different ways to think about the RSC architecture, including what problems RSC solve, why RSC are valuable even in a world without server-side rendering, and how React’s reconciliation phase enables RSC to make partial updates to the UI as a result of server-side events.

Topics include:

• 0:00 - Intro
• 5:45 - What if RSC were introduced before SSR?
• 10:54 - What does it mean to render RSC?
• 25:41 - Why SSR does not apply to Server Components
• 35:31 - Server-driven UI updates

Ryan shares his thoughts on how Server Actions and the useFormStatus hook are letting him build reusable pending UI for any form in his Next.js side project. Sam talks about how TypeScript prevents an entire class of data-loading bugs that have plagued single-page applications built with a client-side cache.

Topics include:

• 0:00 - Tailwind Connect
• 2:38 - Using TypeScript to prevent data-loading errors
• 19:27 - Building reusable form UI with Server Actions and useFormStatus

Links:

• Server Actions in Next.js
• Styling a Radix Dialog with Tailwind CSS

Sam and Ryan share their thoughts on the recent React Roundtable with core team members Sebastian Markbåge and Andrew Clark. They talk about the evolution of Server Components from the perspective of solving the problem of fetching data in React apps, how SPAs have a lower baseline but higher ceiling in terms of the user experience they can deliver, and what they’d like to see from frameworks that are built on the RSC architecture.

Topics include:

• 0:00 - Intro
• 0:36 - Recap of Server Components as a solution to data fetching in React
• 11:47 - How Server Components improve the baseline user experience of React apps while also letting us layer in SPA-like enhancements
• 20:11 - What features we give up with server-driven data fetching, and how can we get them back?
• 29:13 - How RSC and Actions bring the setState-and-diff model across the network
• 31:59 - What opinions are left to frameworks that are built on the constraints of RSC, and what would we like to see from them?

Links:

• React Roundtable with Sebastian and Andrew
• Build UI Newsletter

Sam and Ryan use some recent Twitter discussion on copying + pasting code (instead of abstracting it for reuse) as a springboard for a discussion about how their thinking on low-level UI components and design systems has changed over the years.

Topics include:

• 0:00 - Intro
• 2:16 - Copy-paste vs. creating abstractions
• 11:43 - How we used to build shared UI components
• 15:34 - How we use UI components today
• 22:42 - Is copy-paste the easiest way for developers to implement consistent design?
• 27:41 - When should we create abstractions?
• 37:15 - Designing copy-pasteable APIs

Links:

• Dan’s tweet
• Build UI Newsletter
• Sam’s Server Actions video on YouTube

Sam and Ryan share their learnings from working with Server Components in earnest over the past week. They talk about how Server Components can simplify client components by passing them props, why it makes sense for a component that can run everywhere to be a Server Component by default, whether RSC is causing unnecessary churn in the ecosystem, and how to think about choosing Server Components vs. client components for a given task.

Topics include:

• 0:00 - Intro
• 0:48 - Lessons learned from building a D3 chart as a React Server Component
• 22:04 - Are Server Components causing unnecessary churn in the JavaScript ecosystem?
• 32:14 - Do Server Components replace Client Components?
• 40:13 - Ryan’s thoughts on rewriting some client-side data fetching code with Server Components

Links:

• Ryan’s Build UI course on Server Components
• Sam’s D3 Chart video on YouTube

Sam shares some recent learnings around hydration mismatches when rendering time zoned dates on the server and the client. He talks about using the TZ environment variable to reproduce the issue locally, and how he solved his problem by avoiding impure format and transformation functions from date-fns.

Topics include:

• 0:00 - Intro
• 0:50 - Sever vs. client time zone mismatches, and the TZ environment variable
• 14:34 - Which date-fns functions are impure?
• 23:56 - Using intervals and comparison to remove impurities

Links:

• date-fns
• date-fns-tz

Sam and Ryan talk about using MJML to design, build and send transactional emails with React directly in the browser. They also chat about how to use Framer Motion to get a CSS radial gradient to follow the mouse cursor and the differences between React state, refs, Motion Values, and external stores.

Topics include:

• 0:00 - Intro
• 1:10 - Building in-browser email previews with MJML
• 18:50 - Using radial gradients and Motion Values to build a moving spotlight treatment

Links:

• MJML
• React Email
• Maizzle
• Sam’s Spotlight video on YouTube
• Spotlight code recipe

Sam and Ryan talk about building an animated tabs component with CSS’s mix-blend-mode property and Framer Motion’s layout animations. They also talk about how to use the URL constructor in JavaScript to help implement secure arbitrary redirects, as well as their initial reactions to new framework APIs that blur the lines between server and client code.

Topics include:

• 0:00 - Intro
• 0:35 - Animated tabs with mix-blend-mode exclusion and Framer Motion’s layoutId
• 14:26 - Using the URL constructor for arbitrary redirects after login
• 27:12 - Reacting to Rich Harris’ discussion on how new framework APIs are exposing hidden API routes

Links:

• Dan Hollick’s thread on blending modes
• Animated Tabs recipe
• Animated Tabs YouTube video
• URL constructor
• Rich Harris’ talk