Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)

Rate this content
Bookmark
This video covers deploying advanced React Server Components (RSC) using a DIY framework. It starts with using workers for server-side rendering and addresses common issues like authentication. The talk explains the benefits of React Server Components, such as reduced bundle sizes and faster load times. It introduces smart placement, an optimization strategy for running workers closer to the database, enhancing performance. The role of region workers in handling server-side logic and rendering is detailed, as well as how these components interact directly with databases. The video also discusses setting up a Cloudflare account and using the Wrangler CLI, along with the importance of measuring bundle sizes for optimal performance.

From Author:

The developer ecosystem is always moving fast and this year has proved no exception. React Server Components can offer a significant improvement to developer experience and to application performance. But I think it's fair to say that this new server-first paradigm can be tricky to wrap your head around!

In the first half of this workshop, we'll explore React Server Components from the ground-up: building our own mini meta-framework to help us understand how RSCs work. We'll discover exactly what is produced by an RSC build and we'll connect those pieces together to form a full application.

Next, we'll deploy it! Cloudflare have also had a busy year too — Smart Placement, in particular, is a new technology that we've developed which fits the RSC model perfectly. We'll explore why that makes sense for our workshop app, and we'll actually deploy it onto the Cloudflare Developer Platform.

Finally, we'll build out our app a little further, using D1 (our serverless SQL database) to really show off the React Server Component's power when combined with Smart Placement.

You should come away from this workshop with a greater understanding of how React Server Components work (both behind-the-scenes and also how you as a developer can use them day-to-day), as well as insight into some of the new deployment patterns that are now possible after recent innovations in the platform space.

This workshop has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

React Server Components is a React architecture that allows developers to build components that render on the server instead of in the browser. This approach helps in reducing the bundle size delivered to the client, improving load times, and enhancing data security by keeping certain operations on the server.

The benefits of using React Server Components include reduced bundle sizes sent to the client, faster page load times, and enhanced data security by executing more code on the server. It also enables efficient data fetching and reduces the environmental impact on the client side.

Yes, React Server Components can directly interact with databases, which is a significant shift from traditional React components that rely on APIs for database interactions. Server components can run database queries, allowing for direct data retrieval and manipulation on the server side.

Smart Placement is an architecture strategy that optimizes where server-side computations occur based on network latency and backend interactions. For instance, if a React Server Component frequently interacts with a database in a specific region, Smart Placement would run these computations closer to that database to reduce latency and improve performance.

To start using React Server Components, you need a compatible React setup that supports server-side rendering. You'll also need a server environment configured to handle the rendering of these components. Familiarity with concepts like ESBuild, server actions, and potential modifications to your build process are also beneficial.

In the React Server Components setup, the region worker is responsible for handling the server-side logic and rendering of server components. It processes requests and interacts directly with backend services or databases, and it is crucial for generating the serialized forms of components that are sent to the client.

 Greg Brimble
Greg Brimble
104 min
14 Nov, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Introduction to React Server Components

Short description:

Hello, everyone. This is the first workshop on React server components. We'll cover client-side rendering, introduce CloudFlare workers, and explore server-side rendering with React and workers. We'll also dive into React components, loading data, building a compiler, and discussing smart placement. My name is Greg Brimble, a systems engineer at CloudFlare. Thumbs up if you've used React server components or CloudFlare. Let's get started!

Hello, everyone. So, this is the first workshop I've ever done, so please bear with me if there's any sort of technical hitches or anything like that. Hopefully, it's some good fun and we'll learn some stuff.

It's going to be very interactive. I have code that we're going to be working through. I have a couple of slides here just to sort of get situated, but it's going to be mostly like at a keyboard and working through some pretty technical stuff. And obviously, the focus here is React server components.

So, I was at React Summit in New York yesterday and we've now got this workshop, so happy days. React server components is obviously a pretty hot topic. There was a good chunk of yesterday's talks dedicated to React server components. It's really cool to see both all of the technological advancements that's happening in the space and also just everyone's interest in trying to adopt this, either because they're, like, users wanting to, like, jump right in and get all the latest, greatest features or if they're framework authors wanting to integrate it into their existing paradigms and stuff.

So, in this workshop today, we're going to take a little bit of a hybrid between those two sorts of users. So, we're both going to be writing server components as users of frameworks, but also we're going to be doing a lot of behind the scenes stuff to see, like, exactly how React server components work and what it would take to integrate them into a framework. So, if you don't follow absolutely everything in this, that's A, okay. It's super experimental, like, a lot of it's probably still going to change. I've just kind of, like, hacked around in this myself, so I don't really know what's going on, but, like, we'll see. Hopefully we get something out of this.

So, I have broken this down as best as I can. We'll see, like, one or two of them are quite chunky. So, we might need to even take a break in between some of these sections. But this is sort of roughly what the agenda's looking like. So, we're going to start off with just, like, React as we know it. So, looking at client side rendering. And then we're going to introduce CloudFlare workers. If you didn't already know, my name is Greg, I work at CloudFlare. I'm a little bit biased, but I think it's a cool piece of tech that fits into just, like, the web dev space really well. So, we're going to be running all of our React server components with workers today. So, like I say, we're going to start with client side rendering. React. Then we're going to introduce workers to you all. And we're going to then look at what it would take to server side render React with workers. And then we're going to stretch into the React components world. And so, we're going to actually start to load some data with React server components. We're going to build a compiler for React server components, like frameworks do. Then we're going to actually load some data from a real database. And then I'm going to discuss something like that we call smart placement, which I think is a really interesting architecture paradigm that really fits well with the React server components model. So, hopefully as we build this, you sort of start to see where I'm coming from with that. And, yeah. That's where we're going to close out this workshop.

I'm Greg Brimble. I'm a systems engineer. I work at CloudFlare, specifically on the product called CloudFlare pages, which is our full stack web app host, which is why I'm interested in all this stuff. It's not really a big surprise for anybody. I don't know how well this is going to work. But can we get, like, a thumbs up or something in Zoom for, like, people that have either, like, has anyone used React server components yet? Are you using Next.js and playing around with it? Or brand new to the topic? Couple thumbs up. Okay. And for anybody who's on Windows, I apologize. I'm on MacOS. So, I'm not 100% sure that everything is gonna work perfectly for you. But fingers crossed. It's all just like Node.js, so it should be okay. And can we do the thumbs up again for anyone who's, like, using CloudFlare at the moment? Just to sort of get a feel for how much I need to explain things. Cool. One person I see. Excellent. And I'm guessing, well, that one person, are you using workers by chance? Go with no. Okay. Cool. So, I got a fair bit to cover. And the repo for this workshop is bit.ly. I think it's also, like, GitHub.com. I'm gonna pop it in the chat. That's a much simpler solution. And the slides are linked in the read me of the repo as well. So, actually, let's just bring it up for everybody. So, here you can see my last minute changes, 33 minutes ago. Who knows what's gonna happen? The slides are right here. So, feel free to follow along with them if you prefer to look at your own screen or whatever. Let's go back. Couple of prerequisites.

2. Setting Up the Environment and Repo Structure

Short description:

Most people here already have Node.js and VS Code set up. To deploy along with us, you'll need a CloudFlare account. If not, you can do it locally. Set up a CloudFlare account quickly, verify your email, and have something deployed at the end. Clone the repo, run NPM install, and install the Wrangler CLI. You'll log in with your CloudFlare account. Node 18 should work, but Node 20 or 24 should also be fine. Replace the constant value in the constants TS file with your CloudFlare subdomain. The repo is organized into seven sections, each with its own project. If you encounter bugs, you can skip to the next section. Each section runs on a different port. Worker subdomains can be found in your CloudFlare dashboard.

I see most people here have got Node.js and stuff already set up. Get code editor, VS code. And the other thing is if you're wanting to deploy this along with us as we go, then you're gonna need a CloudFlare account. If you're not interested in deploying this thing, don't worry about it. You can do it locally. But I do recommend setting up a CloudFlare account quickly. It only takes two minutes. You just need to verify your email address. And then hopefully actually have something deployed and live on the internet at the end of this. So, that would be pretty cool.

As I'm just chatting, if you wouldn't mind, just getting this cloned down. Like I say, open it up. NPM install. And then there should be a dependency in there called Wrangler. Wrangler is our CLI. It's what we're gonna use to run this project. Because like I say, we're gonna be using workers. This is coming with all of that built in. But in parts, we're just gonna be using it as a way to serve static assets. So, it's nothing crazy. It's just a CLI that helps us with our tooling.

If you have signed up for CloudFlare or signing up, what's... Sorry. Sorry, Greg. I was gonna ask you for Wrangler. What do you log in with? So, when you run this, it should open up a browser for you. So, you just run this in the terminal. It should pop up a browser. And then you just sign in with your CloudFlare account. There is nothing specific in Node 20. So, Node 18 should work. I'm just saying what I used as I was working on this workshop. So, it's the only thing I can guarantee that does work. But yeah, I'm not aware of anything particular that I'm using Node 24. So, you should be okay. Like I say, if you are following along for and wanting to deploy this to CloudFlare, you'll need to log in with Wrangler. And you're going to want to replace this one value that we've got. This constant. In this constants TS file. Which I think is right at the root. Let's see. Yes, constants TS. If we open that up, you'll see we've got this one variable here. And right now, I've got that set to my account, obviously. But you can just go to this URL when you're logged into CloudFlare. And then inside bar, there is a whatever your subdomain is. And you just grab that and pop it in here. And then we'll be all set to deploy to your account rather than mine. And then that's it. So, like I say, it took a couple minutes to do that. And if anyone is struggling with any of the setup steps, just holler. But I'll give you just, like, two minutes or so to get through all of that. And then, like I say, we've broken this up into, like, seven different sections. And so, we can get a start with those in just a minute. I'll quickly walk through whilst people are getting set up how this repo is organized. So, we have the most interesting folder here is the exercises folder. Like I say, we have seven sections here. And each of these sections are their own little project. And so, they have, like, a package.json at the top of them. And they're all basically just duplicates of each other. And so, this is gonna be really quite nice. Because hopefully, if you have any problems, you'll be able to skip to the next section and pick up right from where you left off without whatever bug it was that was pestering you. So, everything is kind of identical as you go along. Except, obviously, we've done the progress as you've moved from section one to section two. And then, if we have a look, when we're running this, so we're here in this, like, first section, we're running this on port 8000.1. And when you move to the second section, just to avoid any conflicts or whatever, we're running this on 8000.2. And that continues all the way through to section seven. So, where can you find the worker subdomains? So, you should be able to just go to your dashboard. Let's do this with you live. Dash.Cloudflare.com.