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

Rate this content
Bookmark

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.

 Greg Brimble
Greg Brimble
104 min
14 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This workshop on React server components covers client-side rendering, server-side rendering with React and CloudFlare workers, and the use of workers for server-side rendering. It introduces the concepts of React server components, suspense, and the regional worker. The workshop also discusses the responsibilities of the global and region workers, optimizing bundle size, delivering HTML, and setting up a database. Smart placement is highlighted as a way to improve worker performance.

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.