Frontend First

Tim Neutkens discusses the Next.js app router, leveraging Server Components and React's cache API. He explains partial revalidation and UI updates from server-side state changes, as well as caching layers and stability focus. Also discussed are server component rendering, composition vs. top-down data flow, revalidation after a user event, back and forward navigation, and current focus on stability, performance, education, and TurboPack.

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 - Intro0:40 - Clarifying what the RSC Payload actually is10:12 - Understanding prop serialization when passing props from Server Components to Client Components23:38 - How to define TypeScript types for serialized props, and Remix’s SerializeFrom helperLinks: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 - Intro5: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 Components35: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 Connect2:38 - Using TypeScript to prevent data-loading errors19:27 - Building reusable form UI with Server Actions and useFormStatusLinks:Server Actions in Next.jsStyling 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 - Intro0:36 - Recap of Server Components as a solution to data fetching in React11:47 - How Server Components improve the baseline user experience of React apps while also letting us layer in SPA-like enhancements20: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 network31: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 AndrewBuild 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 - Intro2:16 - Copy-paste vs. creating abstractions11:43 - How we used to build shared UI components15:34 - How we use UI components today22: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 APIsLinks:Dan’s tweetBuild UI NewsletterSam’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 - Intro0:48 - Lessons learned from building a D3 chart as a React Server Component22: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 ComponentsLinks:Ryan’s Build UI course on Server ComponentsSam’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 - Intro0:50 - Sever vs. client time zone mismatches, and the TZ environment variable14:34 - Which date-fns functions are impure?23:56 - Using intervals and comparison to remove impuritiesLinks:date-fnsdate-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 - Intro1:10 - Building in-browser email previews with MJML18:50 - Using radial gradients and Motion Values to build a moving spotlight treatmentLinks:MJMLReact EmailMaizzleSam’s Spotlight video on YouTubeSpotlight 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 - Intro0:35 - Animated tabs with mix-blend-mode exclusion and Framer Motion’s layoutId14:26 - Using the URL constructor for arbitrary redirects after login27:12 - Reacting to Rich Harris’ discussion on how new framework APIs are exposing hidden API routesLinks:Dan Hollick’s thread on blending modesAnimated Tabs recipeAnimated Tabs YouTube videoURL constructorRich Harris’ talk