React Server Components: Where are we at?

Welcome to Syntax. Today, we're gonna be talking about React Vercel Components. It is April of twenty twenty five. I just had to look at my clock to know that. It is April of twenty twenty five, and we might not know where we're at with these things. You Node? Some people might still view React Vercel Components as this Next. Js feature.

So what is the status of them? How could you use them? Even what are they to a degree? And just generally, what's up with React Vercel components? What's the deal? What's the deal with React server components? What's the deal? Like, they've been around

they've been around since, like like, for five years, but, also, they still haven't I I don't feel like they have fully caught on yet. Yeah. So we're gonna try to attempt to explain why and and what they are and and and sort of where you can use them right Node, and it's not just Wes.

Js. And what's the deal with bad websites? Your website shouldn't be bad. You you should be able to have a tool like Sanity. If your website's bad, it's probably because you're not using Sentry. Sentry at Sentry.io, the perfect place to make sure your application is running as good as it possibly can. It's, fast. It's friendly. It's not crashing for users. There's no errors, and it's it's even functioning at all, period. So if you wanna make sure your application is working, and not only just make sure, but let's get this straight. It's about fixing it fast.

You have things like session replay to see exactly a video of what happened, what went wrong when the thing crashed.

You have all kinds of tools to make solving the bugs really, really fast. There's even some AI assistant tools in there as well. It's the best. It's just seriously the best. So, this podcast is presented by Century. Head on over by century.i0/syntax.

Sign up and use the coupon code tasty treat, all lowercase, all one word, and get two months for free. Let's give a quick rundown of what React Vercel components actually Yarn. Because I do feel like even today Wes people talk about them, there is some misunderstanding maybe a little bit about what exactly they do. Mhmm. Yeah. A lot of people think, well,

my client components are already server rendered. So, like, isn't that good enough? So Yeah. Server components in React are components that are rendered either as as part of a build step, which is, like, ahead of time. Like, server components don't require a server, which is kinda funny. But in in most cases, you're probably going to be rendered on demand entirely on the server.

That differs from client components, which client components are often rendered, obviously, in the client, but they can also still be be server rendered.

The difference between the two is that server components simply just send their output to to the browser similar to how server rendering HTML works, versus client components.

They bring everything they need in order to render themselves on the client, which it's not really one or the other. And in most cases, you you'll be using both of them, together.

Server components are a sync, meaning that you can simply just await before you return data, which is amazing API, for many use cases. So you don't have to do, like, a weird loading Scott. And if it's loading, then return nothing.

You can simply just await, like, a database call. And then right once that await is resolved, you can go ahead and render out your your markup, your JSX.

Yes. Server components, they can also be suspended.

So, basically, you can continue rendering the rest of your app while these things are working on their their render, so it's not like it's going to hold up if you Yarn, awaiting them. Yeah.

Modern React is is often streamed, meaning that the browser will start to to render pieces, of the website. And then if you have something that might take a a little while, for example, on, my new website, it's probably by the time you're listening to this, Wes, there's a, like, a Twitter in the footer. Right? And I don't wanna hold up the entire page while I'm I'm fetching Twitter. What if that takes takes a while? So you can suspend that, and then the rest of the website will get sent. And then when that one component, is done, it's no longer suspended. And then it will it will send the markup from the server to the client and and render it on out. You got a Twitter in the footer, my guy? Yeah. I had to I had to do some somewhat seedy sketchy stuff in order to get the, Twitter API working, but I've I've I've got it entirely reverse engineered. I'm pretty and it's it's been working solid for a couple months now. Nice.

Yeah. Server components, basically, the way that it it sends a an r an RFC, a React server component payload to browser, it's basically sending text, right, which is then is it it's rehydrated. Right? Is that the word you would use in this in this? Node. Because because rehydrated

assumes that things are bound to it. Okay. Yeah. Rehydrated means that the browsers is then set setting it up. So, server components are simply just sending either their HTML to to the browser, or if you are doing something refreshing one of the components, it is simply just sending the outputted, React payload.

You can think of it as a server sending HTML. It's not technically HTML. It's it's technically React code that is used to to embed it, but it's not no. It's not fair to say that it's rehydrated because there's no there's no client side stuff happening on a server function unless you're explicitly using a client component.

Gotcha. That that tracks. Okay.

Forgive me if if I'm a little off on some of these things. The the Svelte way of doing things doesn't have any of this stuff. So I I am like my understanding of this stuff is definitely from a React developer who hasn't used React Vercel components beyond the very basics. And and so because of that, like, you could think of this conceptually. Like, you said, it's not HTML that's being sent from the server, but you could think of it conceptually as if you were, you know, like, when we're doing HTMLX stuff. Right? People say, you you have something and it just returns HTML instead of data and swaps out that HTML.

Exactly.

It's similar to that, except for it is React code and not HTML straight up. Yeah. Exactly. But it's not

bringing anything else with it. You know? So if you had Yeah. Like, an expensive library to do, like, markdown parsing or code highlighting is is a good example Wes in order to do code highlighting in the browser, you either have to use a smaller library that's not as good, or you can use a very large library. You have to download the entire thing on on in the browser, which is is not awful in in some cases. But in the case of a Vercel component for for my code blocks, I render it a % on the server, and it simply just sends the HTML to to the browser. And I don't have to worry about how large any of my plug ins are for markdown parsing or for code highlighting or or anything like that because it all happens on the server, and just a thin little, markup is is sent to the client. Yeah. It it sends the result Exactly. Not the result. The library. Yes. Yeah. Exactly.

Server functions, which are were previously called, server actions, are functions that run on the server and and sort of work with React Vercel components. So this could be like a database call, could be, like I said, markdown Node highlighting.

Server functions are functions that can be called either from the client or on a form submission, meaning that you get the you essentially get, RPC, meaning that you can write a function that runs on the server, and then you can simply just call that from your UI.

And instead of it importing that server function into your, client side application, it will just run the RPC back and forth commands between the two and send the data from from one to another.

And then there are several hooks you can use for maintaining Use action state is the big one for maintaining the return what comes back from the response, any pending, like, if something is waiting, clearing caches, all that stuff. Word.

Cool. Like a very quick rundown of what React Vercel components are. So where are we at now with all of the the different frameworks? Yeah. So I I guess the joke of it being just a Next. Js feature,

doesn't really track these days, but you will see that there is not a ton of support still out there, with, like, two major platforms supporting it, well and then other things, you know, potentially. So Next. Js full support, it's it's, you know, the first one to really embrace React Vercel components. Mhmm. The Waku, which is honestly really exciting framework, waku dot gg, it's the minimal React framework, does have full support for React Vercel components. And the documentation I found on these to be very good in terms of, how to use them with Waco. So, Waco JS enticing to me, honestly.

So I built I moved my entire website, which was on Gatsby. I moved it to Next. Js.

Mhmm. And I I found myself frustrated Scott with React Vercel components, but just with, like, having to do things in a very specific Next. Js way, which normally I don't mind because I'm building stuff from scratch. But having to try to shoehorn my, like, Gatsby code into Next JS specific way, it was just it was a bit too frustrating for me, and the builds kept breaking, stuff like that. So I was like, you know what? I'm gonna try Waku. So Waku is from the developer behind, Zuestand and what's the other one? Jotai.

Jotai. Yeah. Yeah.

And I'm I'm really happy with it. So almost all of the code from the Next. Js ported over to to Wahoo because it was just React server components. Yep. Right? It it just worked a little bit nicer. It uses Vite, which I'm I'm pretty happy about. It's like three or four Vite processes sort of put together because there's a client side Vite process.

There JS a server rendered client Vite process. There's a React Vercel component process, and I think there's there's one more, which is a little odd, but it works. And I've been been really happy with it. It still is early. Like, it's not out of one point o yet. The documentation JS, you said the documentation is great. It looks nice, but the documentation is sparse. You have to do most of your learning from examples. Yes.

Clear, maybe not complete.

Yeah. There's there's no, like I don't I would go as far to say there's there's, like, no docs.

It's just, like, a a bunch like, one page showing all the how all the APIs, and then there's, like, 30 or 40 examples, which I really like because you can dip into the examples directory and go in. But, like, I'm a bit of an idiot, and I figured it out. And, I've been been really happy with that. I Scott it hosted on Cloudflare Workers. The whole thing is building in, like like, two minutes. Like, that's the build process

from next to Warp went, like, in half, which is it was unbelievable. So I was really happy with that. Yeah. I wanna take a brief sidebar here. They have a little thing in the bottom corner of the Waku website saying designed by candycode candy code Com. Man, what a cool little site this was.

They they've designed a lot of things that we like, like, the payload CSS.

Man, a, Jotai's website, but just a lot of cool little websites if you go through their kind of general thing. But also the website itself is just really pleasant. Pleasant and modern in a in a great way Yeah. While not looking like anything you've really seen before. So

big fan of this website. Gradient scroll Bos. Is that Yes. Possible? Is that even possible? How do you that how are they doing that? I didn't know you could put a gradient scroll Bos, or have they reimplemented it?

They they possibly reimplemented the scroll bar.

I don't know. I haven't I haven't examined that. There's a lot of interesting gradient stuff here on this website, whether that's gradient text. Oh, yeah. Scroll bar thumb, background image, linear gradient. Yeah. You can put a background image on a

scroll bar thumb. I didn't know you could do that.

It looks good.

Yep. I've never seen that before. Well, today today, I learned. What what about what does it look like in Safari? Hold on.

So The scroll scroll Bos APIs were different in every oh, it works in Safari.

Let's try it on Firefox.

Firefox is the

But everybody standardized network. No. There was a standardization of the scroll Bos CSS API, but from what I remember, it's it was relatively limited.

Okay. No gradient on my Firefox? No. No gradient on Firefox. This it's still using the older, like, colon Node WebKit scroll Bos. WebKit. Yeah. Big fan. That looks cool.

Yeah. Cool site. Candy Node. How does work?

React router, not shipped yet. Rec Router has been talking about React Vercel components for probably, like, well, a couple Yarn now. It was supposed to be shipped with the, like, the remix to React router seven, and then it it never got its way in. There's been a pull request open for a long time. It's a very hard thing to get right, and I think that it's it's very hard for these these library authors to to try to figure out how to bring it in. Alongside that, Michael Jackson, who's one of the creators of of React Router, he put out a tweet that says, React server components are nice in theory, but five years in, it's not working out. It's been fun. React, you taught me a lot, but I'm done.

And he says, have fun with your React server, Dom, e s m v ESLint server bundles.

And I think that that's what it JS, is that building a framework that supports React server components goes so deep into the bundler realm. Like I said, Waco's three or four deep processes.

It's just problems all the way down. I can't imagine all the headaches. The headaches myself using it, have been been high. I can't imagine trying to build the the framework that it does. Even something as simple as a singleton in Next. Js is just, like, not possible because there's several bundles, and you cannot share a singleton between the two. Like, it's just it's not possible at all. It's it's really frustrating.

Even to be clear, people are asking, are you done with React or just React Vercel components? And he says the whole thing on the greener pastures.

So it seems like he's done with React. This has been, like, the straw that broke the camel's back.

Yeah.

I I'm curious. I maybe we should have Manda to talk about this because I've been following his GitHub for about a year now, and he's been cranking out all kinds of standards based modules, things that are based on ESM, things that are based on web standards, things that are based on, browser built ins, and just, like, something that I've been kinda I've been beating this drum as well. I did I did a couple conference talks about this. It's just like standards based JavaScript is is the future.

And a lot of this React Vercel component stuff is not that. It's very heavy on bundlers.

And I like I like React server components, but it's not the, like, the standards that that we we know and love. So I'd be curious to see.

He's cooking. He's cooking on something. Now you can tell. Because, like, they they said that something will come of remix and, like, they haven't announced what that is.

He's been cranking out all these tiny little modules, which he's doing that for a reason. He's he's definitely he's cooking on he's cooking. I'm curious. Listen. There's a new

HTML or a new JavaScript API for, like, swapping DOM elements or something just somewhat recently? Yeah. What's that called? I'm, like, trying to Google it, and I cannot find the name of it. Yeah. It's it's moved before.

And this is a new JavaScript API, which will allow you to move parts of your DOM somewhere else without normally, what happens is if you move a DOM element, you take it out of the DOM, you lose all of your state, you lose all of your bindings, all of your event listeners, everything, And then you put it back in, and it has to rerender it, and it's Scott readd your bindings and all of that. And and this new move before API will allow you to simply just move things in the DOM without having to detach any of that. So why why are you asking about that? What are you what are you thinking?

Oh, just that, like, you know, the ways that we work in in front end frameworks, they see they seem to be being aided a little bit more by newer JavaScript APIs and even newer CSS APIs, like whether that is, you know, view transitions, you know, the easier ways to to swap our elements that are more less needing of a shadow DOM type of situation. I don't really know. It just feels like it feels like the the web platform itself is getting more friendly, towards the types of things that we've been really leaning on things like the virtual DOM for.

And React itself is is working on something called React activity. It used to be called, I think, React off screen.

I haven't looked into it too much, but I think the I think it's going to use that API. And I think the idea with that is you can prerender things Yes. Off screen.

And then when it comes time to having to show them, you can, whoop, swap them in lightning fast without having to do any of the reattaching that we we talked about. Interesting stuff. Yes. Vite.

Can you use React Vercel components with Vite? Kind of. That's Waku has has figured it out or or Waku, but Vite six has this new API called the environment API.

And the whole idea with the environment API is that you can run Vite in multiple environments. Vite was simply a browser based bundling tool.

And now with the environment API, it can it can work in Node. It can work in on CloudFlare workers. It can run-in on the browser.

And that then opens up a lot more for framework authors because now you can control the whole stack of, like, both my server and my client all are running through Vite, instead of having to do some weird, like, bundling. You know? The running running that on the on node has always been tricky. So Wakelet doesn't use that this just yet. I'm assuming they will move over to that, and then that will get rid of the three or four processes.

There's a couple of plug ins. A couple people have taken stabs at plug ins for Vite, using React Vercel components, but nothing that is, like, simply, you know, how how easy Vite is to get up and running.

I bet we will start to see that soon Wes there'll be, like, a quick little starter that gives you a server and a client all running through Vite.

Yeah. Let's hope so.

TanStack, a lot of people use TanStack Query. You can use React Vercel components via Next. Js with TanStack Query currently.

There is something called TanStack Scott, which is their whole platform.

TanStack Start itself does Scott, support React Server components just yet.

It does do SSR. I know we talked to Tanner, and there's an emphasis on, like, client side stuff within TanStack Scott, but you can do SSR with it. Start does have React server components planned.

Yeah. But like you said, it's been it's also like React router been delayed many times. I personally don't know the status of where it's at right now. Jumped into the Discord a couple weeks ago when I was, like, rethinking

Next. Js, and I was like, what should I I was like, maybe start. And I was like, hey. Like, where you where you at with this type of thing? And it seems like they're more focusing on getting, like, a solid Scott.

Not solid start, but, like, getting everything with ten sec start just to kinda, like, figure it out and finish and out the door because then adding server components to that is is just another thing. So I think they wanna get everything else stabilized first, and then they will move on to it. But they are planning on it, and and Tanner's a big fan of server components, he said. So, eventually but it is it is kinda interesting that, like yeah. We're a couple Yarn in and really only Waco and Next. Js Yarn, like, the two Usable. Like, solid ways. And, like and even Waco is I I maybe would say don't don't build a huge application. Personal website, which is relatively large, but I don't mind fussing with with it. But it's still it's moving quick, and things are breaking. Right? It's pre one point o.

Yeah. Word.

Bun, nothing really there on Bun just yet, but Bun is big on on, like, running JSX on the server.

Yeah. And they have quite a few demos of kind of similar ideas.

So we I I wonder if we'll see something like that, or we'll see something similar to React Vercel components come out of BUN.

And then and DIY, you you can try to do it yourself. I I got it running with, like, Express at one point.

Highly not recommended.

It's, it's bundler problems all the way down. So I, good luck with that. Yeah. Yeah. Yeah. It's a little bit of exhaustion on on some people's, I think, with with all of the different bundling and everything, and a lot of people wanna get back to just standards.

I'm somewhere in between where I I just want everything to work together.

But then when it is too tight, sometimes you hit these these issues. You know? And and and that's maybe my my next thing is, like, why the hate? Why do some people not like, React server components? Bundling complexity, probably, a a big one. Limitations, there's no, like, explicit methods, you know, get post put, middleware, all these things. Like, these things are very simple with, like, a 10 stack start where they're just not possible.

And if you build things in the React Vercel component way, you're probably fine, but a lot of people have existing code.

A lot of people wanna do things in the way that they understand them. And if you just don't have those knobs to turn or,

in the React server component world. Yeah. I mean and in that case, I mean, it's still pretty much just

Next. Js is the doing it the the way. Yeah. And, like, Next. Js has, like, a whole bunch of, like, weird limitations around redirects and cookies and what you're allowed to do here and there. And a lot of those as I moved from next to Waco, I realized that a lot of those limitations are not next's fault.

They are simply just because of limitations in streaming.

Oh, streaming. And you you simply cannot do things like set a cookie when you have already started streaming.

Mhmm. A lot of that hate gets put on Next. Js also just because a lot of people weirdly hate React and and Next in general.

But there's that, and then there's also just like Next. Js is very opinionated about about the way that they they do things. Right? And that's fine. You Node use whatever it is that you want. A lot of people much prefer that because there's not as many foot guns of doing doing potentially, expensive things.

Yeah. I think another reason that people hate this is because there's just, like, a lack of parity amongst React frameworks JS we've talked about here. You aren't getting the the same React in all of the frameworks. And so React Vercel components, a React core feature JS only available in Next. Js and Yeah. Waku and, you know, these these kind of fragmented ways. So because of that, it JS, like, fracturing the React landscape completely. There's no parity. You're not using React as a platform. You're using, parts of React at any given in any given point. And I think for me, the the features that exist within RSC are all things that I would have said, yes. Yes. Give me that. Give me that. Give me that. And now I'm like, oh, but not like this. You Node, not like this. I wanna I wanna I wanted these features, but, my wife yeah. Yeah. And the hilarious thing about that is that

React server components, if the whole point of it is that there's not going to be a a way to do it in every single framework. And, like, I was able to move over 98% of my Next. Js code to Waku because it is a standard.

But the frustration, like you said, is that all the a lot of these routers and frameworks have not yet implemented them. So in an ideal world, we would all get along, and and we would all have a single way to to do things. Like, data fetching Yeah. Is now and and, like, loading.

Those are now in React core. How do you how do you fetch data? How do you inject data into a component? How do you how do you do caching? A lot of this stuff is built into React core, but it's not yet been implemented in all of the frameworks. So there's a lot of that that frustration out there. You should be able to just npm install some RAM component, and that component will bring your client side, your server side, your data fetching. It bring it should it should bring them all, and and you don't have to worry about integrating into it. But we're not there just quite yet. It's been several years. I don't I don't know that we will ever get there. I hope we do. Too long is really what the answer is. It's been too long. Yeah.

Bummer.

Yes. Last thing I wanna say is is is React server components lock in, because you you see I see this a lot on the Next. Js and React Reddit. Yeah. I don't think so because most of my logic code moved from Gatsby and moved to Next. Js and moved to Waku because I try to keep everything as standard on Vercel. And even things like the the form actions API in React is built on, thankfully, a standard, and that's the the form data API.

So there is a little bit of, like, weird code that needs to be written in some cases if you're moving some JavaScript from one to another, but it's no different than if you're moving express code to to something standard as well. So I don't feel like it's a huge lock in. I feel like I could get out of this React server components in relatively quickly.

I don't think I could get out of JSX very quickly, and people are gonna be asking, like, what about why didn't you choose x, y, and z? Why didn't you use Felt? I had no interest in Yeah. Rewriting all of my JSX into some other random templating language. I just wanted to move it over one to one, pass the data in that it Node, and those components stayed untouched.

Right.

Yeah. Well, I think that's a good update for people who are wondering what the status of this stuff is. It's really easy, like, to get into a time machine here, and now it's x amount of days from, you know, when they were first announced and just wonder, hey. What is going on with that? I'm not using it, or I'm not using Next. What what's the deal with that? So here's the status. That's where we're at today. And I gotta say, hopefully, this list changes a little bit in six months or else, I think, you Node, I don't know. Like, you could call React Vercel components a failure at some point. Yeah. I think if it's not picked up

by React Router and Tansac or if it's, like if it doesn't have any more momentum in six months, a year from now, I think people will either, I don't know, maybe maybe move to something else already. We're already starting to see that as well because, like, it's not like React can, like, oh, never mind. You know? Like, they they kinda kinda bet the farm on this type of thing. So I I still feel feel good about it, but that's just me out of out of one Sanity. And I certainly would have not have expected the it would take this long to implement, and we're still here five years in.

Yeah. I'm gonna disagree and say I don't feel good about it, not because I don't believe in the API, but I just think five years and to have this be the result is not good. Yeah. That's why I would say that. Yeah.

Alright. Thanks, everybody, so much for tuning in. We will catch you on Wednesday.