Frontend First

Latest Episodes:

Tim Neutkens on the Next.js App Router Aug 16, 2023

Show notes

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:

Understanding prop passing from RSC to Client Components Aug 09, 2023

Show notes

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

Server-side rendering vs. Server Components Jul 12, 2023

Show notes

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

Reusable pending UI for forms with Server Actions Jul 05, 2023

Show notes

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:

How Suspense led to Server Components (React Roundtable reaction) Jun 07, 2023

Show notes

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:

Learning by copy-paste May 24, 2023

Show notes

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:

What problems do React Server Components solve? May 17, 2023

Show notes

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:

Implicit time zones and the TZ environment variable May 11, 2023

Show notes

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:

React email previews and radial gradients May 03, 2023

Show notes

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:

Blending modes and secure redirects Apr 26, 2023

Show notes

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:

Our TOPPODCAST Picks

Follow Us

Stay Connected

Related Podcasts

Links

Stay Connected