React Server Components: Where are we at?

there's no, like, explicit

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,

But then when it is too tight, sometimes you hit these

within RSC are all things

the whole point of it is that there's not going to be 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 the standards that that we we know and love. So I'd be curious to see.

React and and Next in general.

methods, you know, get post put, which

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? in streaming.

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

redirects and cookies and what you're allowed to do here and there. And a lot of those as I moved from Let's try it on Firefox.

weird limitations 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 their output to are functions that run on the server and and sort of work with React Vercel components. So this could be like a database call,

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

next to Waco, server components are simply just sending

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,

98% 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

that exist

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 does Scott,

there's not as many foot guns of doing doing potentially,

around

TanStack Start itself

we I I wonder if we'll see something like that, or somewhere else without browser based bundling tool.

that we we talked about. Interesting stuff. Yes. Vite.

And a lot of this React Vercel component stuff is not quickly.

Yeah. Word.

it feels like the the web platform itself is getting more friendly,

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

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, with ten sec start just to kinda, like, figure it out and finish and out the door of standards based modules, 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 know, the easier ways to to swap our elements that are more

instead of having to do some weird, like, sends it will the HTML we're not there just quite yet. It's been several Alright. Thanks, everybody, so much for tuning in. We will catch you on Wednesday.

things

He's been cranking out all these tiny little modules, React payload.

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.

just standards.

Not solid start, but, why why are you asking about that? What are you what are you thinking?

like whether that is,

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

Yeah. Let's hope so.

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,

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 you could call React Vercel components a failure at some point. Yeah. I think if it's not picked up

of, like, both my server and my client all are running through Vite, And a a way to do it in every single framework. And, like, I was able to move over the build process Bun is big on Mhmm. A lot of that hate gets put on Next. Js also just because a lot of people weirdly hate

HTML Clear, maybe not complete.

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.

they see they seem to be being aided a little bit more by newer JavaScript APIs and even newer CSS APIs,

And that then opens up 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,

React Server components just yet.

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.

we'll see something similar to React Vercel components come out of BUN.

Yes. Off screen.

less needing of a shadow DOM type of situation. I don't really know. It just feels like

move parts of your DOM And I think that that's what it JS, is that 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

Can you use React Vercel components with Vite? a lot of those limitations are not next's fault.

multiple environments. Vite was simply a is

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 how all the APIs, like, a solid Scott.

you know, view

like, getting everything

because then adding 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.

you know, how how easy Vite is to get up and running.

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

And then and DIY, is you somewhat seedy sketchy stuff in order to get the, I render it a % on the server, and it simply just the, Kind of. That's Waku has has figured it out or or Waku,

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.

nothing that is, like, simply,

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

support

like, a Twitter in the footer. Right? And I don't wanna hold up the entire page lightning fast without having to do any of the reattaching

one component,

out your your markup, your JSX.

of the website. And then if you have something that might take a a little while, for example, on,

Yes. Server components, they can also be suspended.

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 Next. Js is the doing it the the way. Yeah. And, like, Next. Js has, like, a whole bunch of, like,

you can

So, basically,

awaiting them. Yeah.

my new website, it's probably by the time you're listening to this, Wes,

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

there's a,

both of them, together.

Server components are a sync, meaning that you can simply just await 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 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 Modern React is is often streamed, meaning that the browser will start to to render pieces,

before you return data, which is

it's not really one or the other. And in most cases, you you'll be using entirely on the server.

on the client, which And if you build things in the React Vercel component way, They are simply just because of limitations They bring everything they need in order to render themselves he's cooking on he's cooking. I'm curious. Listen. There's a new assumes that limited.

April of twenty twenty five. I just had to look at my clock to know that. It is April of twenty twenty five, JS only available in Next. Js and Yeah. Waku and, you know, They they've designed a lot of things that we like, like, the payload CSS.

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.

Welcome to Syntax. Today, we're gonna be talking about React Vercel Components. It is

and

code into when you have already started streaming.

bring it and and we would all have a single way to to do things. Like, data fetching all kinds

It looks good.

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.

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 But everybody standardized I think that it's it's very hard for these these library authors to to try to figure out how to 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, and moved to Next. Js and moved to Waku because I try to keep everything

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

the developer behind, There's a couple of plug ins. A couple people have taken stabs at plug ins for Vite, Highly not recommended.

Firefox is the in all of the frameworks. And so React Vercel components, a React core feature

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

and go in. But, like, I'm a bit of an idiot, and I figured it out. And,

and where they're just not possible.

big fan of this website. Gradient scroll Bos. Is that Yes. Possible? 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

which is

of the scroll Bos CSS API,

how to use them with Waco. So, Waco JS enticing to me, honestly.

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

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 try to shoehorn my, like, Gatsby Jotai. Yeah. Yeah.

probably, like, well, a couple Yarn now. It was supposed to be shipped with So markup is is sent to the client. Yeah. It it sends the result you're probably fine, but a lot of people have existing code.

process, and I think there's there's one more, client side application, that. It's very heavy on bundlers.

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 React server components? Bundling complexity, probably, and all that stuff. Word.

which is a little odd, but

candy code Com. Man, what a cool little site this was.

but from what I remember, it's it was relatively

Man, a, Jotai's website, but just a lot of cool little websites if you go through their Right.

server rendered client Vite process. There's a React Vercel component middleware,

honestly really exciting framework, waku dot gg, it's the minimal React framework, does have full support for

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

which I'm I'm pretty happy about. It's like three or four Vite processes not shipped yet. Rec Router has been talking about React Vercel components for code highlighting is is a good example Wes he's doing that for a reason. He's he's definitely

They they possibly reimplemented the scroll bar.

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

platforms supporting it, well and then

There JS a Server functions are functions that can be called either

not a ton of support still out there, with, like, two major

it? 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.

JS, It's, 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, client components.

sort of put together because there's a client side Vite process.

doesn't really track these days, but you will see that there is

Yeah. Cool site. Candy Node. How does work? 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.

Zuestand

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 you know, the ways that we work in in front end frameworks,

misunderstanding maybe a little bit about what exactly they do. Mhmm. Yeah. A lot of people think, well,

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.

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

of what React Vercel components

Js. And what's the deal with bad websites?

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

So what is the status

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

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

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.

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, if you Yarn, a React developer

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.

Yarn. Because I do feel like even today Wes people talk about them, there is some

of them? How could you use them? Even what are they to a degree?

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

my

server components simply just send 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 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, a lot we would all get along, 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.

to the browser similar to how server rendering HTML works, and then there's,

on demand all the way down. So I, good luck with that. Yeah. Yeah. Yeah. It's expensive things.

That differs from client components, which client components are often rendered, Yeah. Is now and and, like, loading.

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

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.

oh, never mind. You know? Like, they they kinda kinda bet the farm on this type of thing. So And then there are several hooks you can use for maintaining

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, And I like I like React server components, but it's not the, like, a framework that supports React server components

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.

basically sending text, right, which is then 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 towards the types of things that we've been really leaning on things like the virtual DOM for.

is it it's rehydrated. Right? Is that the word you would use in this in this? Node. Because because rehydrated

Yeah. Server components, basically,

it's

the way that it it sends a an r an RFC, a React server component payload to browser,

there is a little bit of, Yeah. There's there's no, like I don't I would go as far to say there's there's, like, no docs.

by a singleton in Next. Js is just, like, not possible React router,

code that needs to be written in some cases if you're moving on, like, running JSX on the server.

So

moved from Gatsby You can simply just await, like, a database call. And then right once that await is resolved, you can go ahead and render what's the other one? Jotai.

in all these things. Like, these things are very simple with, like, a 10 stack start relatively React server components, if more for framework authors because now you can control the whole stack 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

some RAM component, and that component will bring your client side, your server side, 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 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 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 like, 30 or 40 examples, which I really like because you can dip into the examples directory but Vite six has this new API called the environment API.

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.

like, weird 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 Bun, nothing really there on Bun just yet, but bringing Oh, streaming. And you you simply cannot Server functions, And the whole idea with the environment API is that you can run Vite in

most of my logic code built ins, in. Alongside that, Michael Jackson, all the a lot of these routers and frameworks have not yet implemented them. So in an ideal world, goes so deep into the bundler realm. Like I said, Waco's three or four deep processes.

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, Gotcha. That that tracks. Okay.

Bummer.

or if you are doing something refreshing one of the components, either their HTML

could be, like I said, markdown Node highlighting.

from the client

Exactly. Not the result. The library. Yes. Yeah. Exactly.

to to the browser, 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.

my understanding of this stuff is definitely from

get the you essentially get,

which are were previously called, 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.

who hasn't used React Vercel components beyond the very basics. And and so because of that, like, It's similar to that, except for it is React code and not HTML straight up. Yeah. Exactly. But it's not

to to the browser. And I don't have to worry about how large any of my plug ins are for And this is a new JavaScript API, which will allow you to bundling. You know? The running running that on the on node has always been tricky. So It's just, like, a a bunch like, one page showing all the do things like set a cookie

clearing caches, 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, The difference between the two is that

there's no client side stuff happening on a server function unless you're explicitly using a client component.

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, React Vercel components. And the documentation I found on these to be very good in terms of, And just generally,

markdown parsing or for code highlighting or or anything like that because it all happens on the server, and just a thin little, 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, 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.

Exactly.

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 parts of React at any given in any given point. And I think for me, the the features

in order to do code highlighting in the browser,

RPC, meaning that you can write a function that runs on the server, and then you can simply just call that from your UI.

just run the RPC back and forth commands between the two and send the data from from one to another.

stuff. Right? People say, you you have something and it just returns HTML instead of data and swaps out that HTML.

things are bound to it. Okay. Yeah. Rehydrated means that the browsers is then set setting it up. So, versus 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.

or on a form submission, is the future.

server actions, network. No. There was a standardization And then when it comes time to having to show them, you can, whoop, swap them in meaning that you

in the case of a Vercel component for for my code blocks, can anything else with it. You know? So if you had Yeah. Like, an expensive library to do, like, markdown parsing or obviously, in the client, but they can also still be be server rendered.

And instead of it importing that server function into your, Waku is from

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.

It's just problems you you can try to do it yourself. I I got it running with, like, Express at one point.

because there's several And that's fine. You Node use whatever it is that you want. A lot of people much prefer that because that it does. Even something as simple as Cool. Like a very quick rundown of 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

things that are based on ESM, things that are based on web standards, things that are based on, 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.

browser standards based JavaScript a a big one. Limitations, client components are already server rendered. So, like, isn't that good enough? Use action state is the big one for maintaining

Yeah.

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

all the way down. I can't imagine all the headaches. The headaches myself using it, amazing API,

have been been high. I can't imagine trying to build the the framework the return what comes back from the response, any pending, like, if something is waiting, using React Vercel components, but it's bundler problems it is simply just sending the outputted, Mhmm. And I I found myself frustrated 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 prerender Yep. I've never seen that before. Well, today today, I learned. What what about what does it look like in Safari? Hold on.

building 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 But the frustration, like you said, is that of my Next. Js code to Waku because it is a standard.