React Server Components Panel Discussion

Tom Preston-Werner

And Now You Understand React Server Components

Kent C. Dodds

React Server Components

Tejas Kumar

React Server Components - Under the Hood

Lee Rowlands

Server Components: The Epic Tale of Rendering UX

Nikhil Sharma

Dear Client, I'm Leaving You

Liad Yosef

React Server Components Unleashed: A Deep Dive into Next-Gen Web Development

Maurice de Beijer

Batteries Included Reimagined - The Revival of GraphQL Yoga

Uri Goldshtein

Enhancing React Ecosystems with Observability: A Deep Dive into React with OpenTelemetry

Jan Peer Stöcklmair

Simplifying Server Components

Mark Dalgleish

Fetch Once, Render Everywhere: React Server Components in Expo Router

Evan Bacon

Build a Custom Storefront on Shopify with Hydrogen

Matt Seccafien

Cathryn Griffiths

The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR

Lenz Weber-Tronic

Zero Bundle Size Server Components

Aashima Ahuja

Building custom storefronts on Shopify with Hydrogen

Abe Haskins

Megan Majewski

Hydration, Islands, Streaming, Resumability… Oh My!

Matheus Albuquerque

Hydrogen: An Early Look at Server Components in the Wild

Daniel Rios Pavia

Build a Product Page with Shopify’s Hydrogen Framework

David Witt

No Code? No Problem! How GraphQL Servers Break and How to Harden Your Resolvers

Kevin Dorosh

Server Components with Bun

Jarred Sumner

Exploring React Server Component Fundamentals

Introducing Waku: The Minimal React Framework

Daishi Kato

The State of The State In The App Router

Jack Herrington

Sai Ekbote

Server Components to the Rescue: Turbocharging and Empowering Your React Apps with Style

Pillippa Pérez Pons

Next.js 13: Data Fetching Strategies

Alice De Mauro

“Microfrontends” for Mobile in React Native

Mo Khazali

A Practical Guide for Migrating to Server Components

Fredrik Höglund

React Server Components from Scratch

Benjamin Holmes

Kathryn Middleton 

Matt Carroll

RSCs In Production: 1 Year Later

Theo Browne

AsyncLocalStorage vs. React Context

 Greg Brimble

Josh Comeau

Andrew Clark

Solving i18n for React Server Components

Loris Sigrist

React Day Berlin

React Day Berlin 2023

I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.

React Server Components are a newer way of working with React that is widely adopted in frameworks like Next.js. In this talk, we will look under the surface of how they work and are executed on the server side, and how they fit with server rendering and traditional React apps.

React Advanced

React Advanced Conference 2023

Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.

Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.

React Summit

React Summit 2023

Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach

GraphQL Galaxy

GraphQL Galaxy 2021

The Guild has recently released Envelop - a new, modern GraphQL Server Framework and plugin system. In this talk I’ll share a brief overview of Envelop and why you should probably upgrade your existing GraphQL server to it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit 2024

This talk will guide you through the integration of OpenTelemetry within React environments, emphasizing Server Side Rendering (SSR) and the innovative React Server Components (RSC). Learn how to harness the power of telemetry data—traces, metrics, and logs—to gain a comprehensive understanding of your application's behavior and user interactions.

Waku is an ongoing project aimed at developing a React framework with first-class support for React Server Components. In this talk, I will provide an overview of Waku and walk you through how you can start developing a new project using Waku.

AsyncLocalStorage is a modern API which has landed in many JavaScript runtimes. It allows developers to pass a value to a callback function without needing to drill through a direct reference. In this, it is similar to React’s Context. However, although they have a somewhat related purpose, particularly in a React Server Components world, there are meaningful differences and a suitable time to use one over the other.

How the transition to React Server Components enables better internationalization solutions.

We’ve been hard at work to create a first-look at data fetching, server rendering, and streaming in universal Expo Router apps.

React Summit US

React Summit US 2023

Join us as we dive into the exciting world of React Server Components, an feature designed to revolutionize the way we build web applications. In this action-packed talk, we'll explore the key benefits of Server Components, such as reduced client-side code, improved performance, and streamlined development experience. Through engaging examples and live demos, you'll learn how to integrate Server Components into your React projects and harness their power to create next-level user experiences. Don't miss out on this opportunity to stay ahead of the curve and elevate your React skills!

React server components (RSCs) are a huge paradigm shift for React. You might even ask if NextJS and server components are the same thing (spoiler: they're not!) This talk demystifies how RSCs *really* work outside the framework. We'll build our own Node server, hook up the RSC renderer by hand, and understand the bundling and routing logic to ship a server component to your browser. Yes, all with live coding. What could go wrong...?

Scaling has always been an issue in software development. Architects have been grappling to solve this problem on many layers. In the early 2000s, a concept of “micro-services” started popping up - a system could be split up by business domain into a number of smaller loosely-coupled services.  More recently, this concept has started being adopted by the frontend community. An app could be split into multiple sub-apps, each with their own teams, technologies, and codebases. Companies like Spotify, Amazon, and Microsoft have adopted this approach and it has helped them scale even faster. In the world of mobile development, the question arises: “Can we create Microfrontends for mobile apps?”.

Our ecosystem can be overwhelming! First, we had the rise of SSR and SSG—and each had its own gigantic pile of frameworks and tools. Then partial hydration enabled us to hydrate only some of our components on the client, which we've seen in React Server Components.  But what about islands? Do they relate at all to Streaming SSR? Moreover, what is resumability, and why do I keep hearing about it? […] Oh, did anyone say rendering on the Edge? Well… There are many approaches out there, and all of them argue that their philosophy is best. In this session, we’ll go over these architecture/rendering patterns, to help shed some light on how some are implemented and the concepts behind them.

NextJS 13.4 changed the game with the App Router and React Server components. The change to the state management model looks simple to start, but gets complex very quickly as you try to create the practical every-day user experiences that were straightforward in the pages model. We'll talk about the different state management models, how they work in the App Router, and how to decide which you should use.

If you use the Next.js app directory, you might not even have noticed it, but you are not only using React Server Components, but you are also using the new streaming SSR feature of React.That means that on first page load, your Client Components will now be server-side rendered, suspense boundary by suspense boundary, and constantly streamed to the client, where they are rehydrated piece-by-piece. If you combine that with suspense for data fetching in your client components, you will suddenly be facing hydration mismatches - as your client components will start fetching data on the server, but the data will not be transported to the client. In this talk, I will go over the rocky journey that we had to go through to support suspense for data fetching in Streaming SSR with Apollo Client, looking at all the curious timing problems that come up with these technologies, and how we try to solve them as best as we can - always with the best possible user and developer experience in mind.

Node Congress

Node Congress 2023

An early look at using server components via Bun’s new bundler, with and without React.

GraphQL Galaxy 2022

GraphQL servers are critical components of your infrastructure and must be highly-available, reliable, and fault-tolerant. This talk demonstrates how to leverage Solo.io’s GraphQL Envoy proxy filter to deploy bullet-proof GraphQL endpoints that are reliable, secure, and developer-friendly. All without writing any code!

React Advanced Conference 2022

Server components is an exciting new feature introduced in React 18. It lets us leverage the fast performance of the server by offloading work behind a component to the server. Why would we want to do that? because server has direct access to data source .so fetching data, making aPI calls would be really fast on the server. The most amazing thing about RSC is that they add 0 kb to the client bundle. So not only RSC reduces the bundle-size but will also improve page load times, eventually providing better user experience. In this talk I will be talking about what react server components are, why do we need them . RSC is often confused with SSR but we will see how they are fundamentally different. We will create a small react application using server components and see the performance benefits. We will also see the challenges we might face when we use RSC in our normal react application. Finally we deep dive into React’s brain and see how things are happening under the hood.

Shopify's Hydrogen framework has been released with an early version of React's server components. In this talk I will discuss: * What is Hydrogen? * What are server component and how are we using them? * How are they different than client and shared components? * How are server side rendering and server components different? * I'll also show examples in the wild After the talk I hope the attendees will understand the Hydrogen framework and React server components better.

React Summit 2022

With React Server Components and React’s new suspense SSR capabilities, we get an paradigm shift in the world of client/server side rendering. The pendulum that started in plain HTML pages, quickly swinged to all-client-rendering, is now returning to the server side. Emerging frameworks like Next.js and Remix usher a new era of web development, one where SSR is a first class citizen. In this talk we deep dive into those React features, talk about the state of the art practices regarding server rendering, and maybe get a glimpse into the exciting future of front-back-full-stack relationships.

React Advanced Conference 2021

A look behind the scenes of how React server components work.In this session we'll take a look at React server components looking at:<ul><li>- the basic concepts behind them</li><li>- the type of data communicated between the client and server</li><li>- how this data is built</li><li>- a look at what's running on the server side</li><li>- what this might mean for future projects</li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications. Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects. Throughout the workshop, we'll cover essential topics, including: - Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components Workshop level:  No matter your current level of React expertise, this workshop will equip you with the knowledge and tools to take your web development game to new heights. Don't miss this opportunity to stay ahead of the curve and master the cutting-edge technology that's changing the face of web development. Sign up now and unleash the full power of React Server Components!

React Day Berlin 2022

- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up

Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image &amp; description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.

Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we'll explore the framework and get a custom storefront up and running quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.

Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#react server components