The bikeshed boys interview Matt on this episode, talking about all things React Server Components (RSCs), exploring their benefits, trade-offs, and adoption strategies. The hosts draw on their experiences at Wayfair, Fireworks, and Whoop to provide practical insights for learning and adopting RSCs.
Why React Server Components
Improved Time to First Byte (TTFB) via streaming.More cohesive view of data dependencies (tighter front-end/back-end coupling).Potential for smaller client-side bundles (automatic code splitting).Requires a server layer (which might be a new concept for some React developers).Migrating to React Server Components
Adoption Strategy:Start page by page (easiest entry point).Flip the mental model: Start from the server and work towards the client.Need to consider the bundler support for RSCs.Challenges:You cannot easily swap out a small subsection of your page with an RSC.Ensuring the bundler supports RSCs.Key Considerations:Think about two environments: server and client.Understanding RSC Concepts
Two Environments: The importance of understanding server (server components, server actions) and client (client components) environments when using RSCs. Front-end engineers new to server-side development need to be aware of security implications and potential caching issues.Frameworks: Highlighted the importance of understanding the core RSC principles separate from framework implementations like Next.js.Not Necessarily Server Rendered: Clarifying that client components can be server-rendered, avoiding the assumption that client components are solely client-side rendered.Resources: Blog post "React for Two Computers" by Dan Abramov is a great resource to learn about the mental model. Also start to look at the other framework implementations to understand that there's next features and there are RSC featuresStandup Updates
Dillon: Using a Dexcom continuous glucose monitor to manage blood sugar levels and migraines.Scott: Getting wedding suits, migrating from Datadog to Grafana monitors.Matt: Working on lyaml translation migration. Experimenting with Parcel's RSC integration and Redwood SDK.Links / References:
React for Two Computers by Dan AbramovAn excellent introduction to the concepts behind React Server ComponentsThe Bookkeeping PatternA little look at how Scott and Matt leveraged Server Components and Server Functions at FireworksWaku RSC Todo AppParcel RSC Todo AppRedwoodSDK RSC Todo App
View all episodes
