React Server Components Without Next-js
Ben Holmes and Anthony Campolo explore React Server Components in RedwoodJS, discussing the framework's evolution and demos an AI chatbot with experimental RSC
Episode Description
Ben Holmes and Anthony Campolo explore RedwoodJS's experimental React Server Components support, demo an AI chatbot, and discuss the RSC ecosystem beyond Next.js.
Episode Summary
Ben Holmes welcomes Anthony Campolo to his stream to explore how React Server Components work outside of Next.js, using RedwoodJS as the test case. Anthony shares his background as a developer advocate and his renewed commitment to the Redwood community after stepping away during job transitions and getting married. The conversation establishes Redwood's identity as a batteries-included full-stack framework built around GraphQL, with features like role-based access control and streamlined deployment to multiple providers. The core discussion centers on Redwood's experimental migration to React Server Components running on Vite — potentially the first framework to achieve this combination — and what that means for a framework whose architecture was built around GraphQL. Ben and Anthony clone an RSC demo repo, troubleshoot OpenAI API keys, and get an AI chatbot running live on stream, examining the server-rendered output, the client bundle size, and the streaming suspense behavior. Along the way, they touch on how other frameworks like Remix, Nuxt, and Svelte are approaching or resisting server components, the tension between implementations and outcomes when developers switch frameworks, and Astro's evolving approach to CRUD applications and plugin discoverability. The stream captures a genuine snapshot of the RSC ecosystem in flux, with honest assessments of what works, what's broken, and what remains to be figured out.
Chapters
00:07:29 - Introductions and Catching Up
Ben Holmes kicks off the stream with a playful jab at the concurrent Next.js Conf, teasing that this will be the place to see React Server Components done differently. Anthony Campolo joins as a guest, and the two reminisce about how they first connected through Twitter and Discord, bonded over Ben's Slinkity project, and collaborated on early examples and documentation.
Anthony recounts his journey through various developer roles and streaming accounts, and Ben reflects on the stream's year-and-a-half history. The banter touches on Slinkity's lasting brand appeal despite being superseded, and the value of the community connections they've built through open source collaboration over the years.
00:10:35 - Anthony's Background and Return to Redwood
Anthony explains how he stepped away from the RedwoodJS and FSJAM communities during a period of job transitions, a foray into Web3, and planning his wedding. He describes his renewed focus on the projects and communities that gave him the most personal and professional fulfillment, with Redwood at the top of that list.
The conversation shifts to the value of developer advocacy and early QA work. Anthony articulates his philosophy of building tutorials and hello-world examples slightly ahead of official releases, which helps surface bugs while creating discoverable content. Ben validates this approach, noting that Anthony's early Slinkity tutorials served as unofficial documentation and captured valuable SEO positioning for the project.
00:17:55 - Introducing RedwoodJS and Its Sweet Spot
Ben frames the stream's core topic: React Server Components without Next.js. He identifies Redwood as potentially the first mature framework to ship an experimental RSC implementation, and Anthony clarifies Redwood's positioning as a batteries-included, database-backed CRUD framework comparable to Ruby on Rails, complete with built-in authentication and role-based access control.
The discussion contrasts Redwood with Astro, addressing a viewer's question about whether they compete. Anthony notes that Redwood targets startup teams building user-facing applications with full backend infrastructure, while Astro is evolving toward app-like functionality from a different starting point. Ben shares that Astro is still maturing its CRUD story, and Anthony offers feedback on Astro's integration discoverability issues.
00:25:31 - GraphQL, SSR, and the Migration to RSC
Ben and Anthony trace Redwood's architectural history as a client-side SPA backed by GraphQL, explaining why SSR was never critical to Redwood's original design but became a persistent community request. Anthony discusses how people's complaints about GraphQL often reflected unfamiliarity with full-featured GraphQL frameworks rather than genuine limitations.
The conversation highlights the significance of Redwood's recent adoption of Vite, replacing webpack, as a prerequisite for SSR and RSC support. Anthony notes that since Next.js doesn't use Vite, Redwood may be the first framework to achieve React Server Components on Vite. He's candid that the RSC work is experimental and far from production-ready, emphasizing that the classic GraphQL-based Redwood remains the stable choice for real applications.
00:34:46 - Live Demo Setup and Troubleshooting
Ben and Anthony begin setting up the RSC demo app from Redwood's experimental examples repository. They walk through the project structure, noting how the RSC implementation currently exists as a parallel system disconnected from Redwood's traditional routing and Prisma-based scaffolding, with questions remaining about how it will all integrate.
The setup process involves yarn installation, environment configuration for OpenAI API keys, and the expected friction of working with pre-release software. Anthony shares practical security tips about setting API usage limits, and they troubleshoot a quota error by swapping API keys, eventually getting the AI chatbot demo running successfully on port 8910.
00:48:28 - Styling Experiments and Developer Experience
With the chatbot functional, Ben attempts to add dark mode styling using Open Props CSS. The pair experiment with various approaches to injecting CSS — import statements, link tags in the document head, and direct HTML editing — discovering that hot reloading isn't yet supported in this experimental RSC build.
The styling exercise reveals the early state of the developer experience, with no hot module replacement and a build-then-serve workflow. Anthony notes this is expected given how new the RSC integration is, and they settle on walking through code rather than making live changes, though they successfully get basic dark mode theming applied through the index HTML file.
00:56:36 - Examining the Server Components Architecture
Ben inspects the demo's source code and network output, analyzing how the AI chatbot uses server-side suspense for streaming responses. He explains that React Server Components use a proprietary format that is neither HTML nor JSON, designed to stream minimal data for React to render elements, and identifies the server-rendered suspense fallback patterns in the code.
The pair discuss the 233-kilobyte client bundle, speculating it may include unnecessary libraries from Redwood's GraphQL infrastructure that will be pruned in future iterations. They examine the AI JSX library powering the chatbot and debate whether its approach of rendering React components from LLM responses represents a useful pattern or unnecessary complexity compared to direct API calls.
01:02:52 - The Broader RSC Ecosystem and Framework Philosophy
The conversation broadens to how other frameworks are approaching server components. Anthony notes Remix is reluctantly adopting RSC while arguing they can achieve the same outcomes without it, and they discuss a tweet from Michael Florence making that exact case. They also touch on Nuxt's server components work and Svelte's deliberate decision to avoid the pattern entirely.
This leads to a philosophical discussion about developers seeking equivalent implementations rather than equivalent outcomes when switching frameworks, which Anthony identifies as a core challenge for framework adoption. Ben relates this to his experience with Astro and Solid, where community expectations are shaped by React's dominance. The stream wraps with Anthony sharing where to find him online, and Ben directing viewers to the concurrent Next.js Conf coverage while affirming Redwood as one of the best fully-featured options for building startups.
Transcript
00:07:29 - Ben Holmes
Hello, world. How's everyone doing? Is anyone watching Next.js Conf right now? If so, close that tab because we've got breaking news.
00:07:38 - Anthony Campolo
Get out of there.
00:07:39 - Ben Holmes
Yeah.
00:07:41 - Anthony Campolo
React framework coming at you.
00:07:44 - Ben Holmes
Yes. Yes. This is the real React Server Components environment that you are about to see.
00:07:50 - Anthony Campolo
But it's not like you're flying through Tron space. I'm just in a room.
00:07:56 - Ben Holmes
Well, I used to not have a green screen, and we have changed our ways. I could even... I could join your space. We're just gonna join your space here. What's up, man? Oh, your face is pretty big, so it's kind of tough.
00:08:08 - Anthony Campolo
I feel violated.
00:08:10 - Ben Holmes
Hey, you're just... yeah, okay. Too much power. Too much power. Anthony, how's it going?
00:08:21 - Anthony Campolo
It's going good. Is this the first time I've ever guested on your stream?
00:08:25 - Ben Holmes
I don't know. I mean, I've gone on your stream a couple times.
00:08:28 - Anthony Campolo
I don't know if you've ever been on my stream. You've been on my streams?
00:08:32 - Ben Holmes
Streams, yeah. I mean, you've hosted. How many accounts have you streamed from at this point?
00:08:38 - Anthony Campolo
Oh, man. AJC Web Dev. QuickNode had a Twitch stream, which I created and was the only one to use. JavaScript Jam never had a Twitch stream. We just did that through my own account and Twitter and YouTube, and those are probably the main ones. And then I've guested on, like, a million streams.
00:09:02 - Ben Holmes
Yep.
00:09:03 - Anthony Campolo
Hey, what's up, Nicky? I was like, oh, I'm a mod. I could do that, but maybe I'm not anymore. No, I am. Or am I?
00:09:11 - Ben Holmes
You still are, yes. I was gonna comment, the people who would be modding are talking right now. I think Nate Codes is also a mod.
00:09:20 - Anthony Campolo
If not, there's the mod icons. Yeah, there we go.
00:09:23 - Ben Holmes
Cool. Nice. We got some fighters in the chat.
00:09:28 - Anthony Campolo
Yeah.
00:09:29 - Ben Holmes
But, yeah.
00:09:29 - Anthony Campolo
Dang, yeah. I remember when you started this stream. Good times.
00:09:36 - Ben Holmes
Oh, yeah. Has it been two years? I think it's just been one year.
00:09:43 - Anthony Campolo
Maybe like a year and a half or something.
00:09:45 - Ben Holmes
Actually, yeah, going on a year and a half.
00:09:47 - Anthony Campolo
Yeah. It was definitely when I was still at QuickNode that you started it, and that was almost exactly a year ago. It was like 11 months ago that I switched to Edgio.
00:09:57 - Ben Holmes
Gotcha. Yeah.
00:09:58 - Anthony Campolo
Slinkity days. Yeah. Let's talk about Slinkity.
00:10:01 - Ben Holmes
Yep. This stream overlay that you're looking at is me going to the Slinkity docs and pulling some assets.
00:10:09 - Anthony Campolo
That's the branding, like, Slinkity has survived through your stream.
00:10:13 - Ben Holmes
The brand was strong. I wouldn't tell anyone to use the library, but the brand was strong, so we just kept it.
00:10:19 - Anthony Campolo
I would still use it over just pure Eleventy or, God forbid, Eleventy with web components.
00:10:25 - Ben Holmes
I mean, yes, I'm in the same camp. Yeah, Zach and I still talk. We have a cool monthly call. It's nice.
00:10:34 - Anthony Campolo
Really.
00:10:35 - Ben Holmes
Yeah. But this stream came about... yeah, sorry, I have a mic delay, so this is going to be a mess. But I remember on Twitter you were saying something like you were super involved in the community, then you disconnected for a bit, and now you want to come back with a vengeance, especially with RedwoodJS. Is that kind of how we got here?
00:10:58 - Anthony Campolo
Yeah, that is how we got here. And so, yeah, while I give a little background here, I think most people who watch your stream probably know who I am because I hang out in your stream a lot. For people who don't know who I am, my name is Anthony Campolo. I'm a developer advocate at Edgio, which is a deployment provider, kind of enterprise-grade, a little bit like Cloudflare or Fastly type deal. And I do a lot of open source. I first got involved with Redwood back when it first came out in the 0.1 days. I was a lowly bootcamp student trying to make it in this world, and I got into Redwood. I thought it was really cool and had an interesting community, and I started podcasting and streaming and doing meetup talks and just, like, devrelling, essentially. I parlayed that into a job for a GraphQL company called StepZen. I did a Web3 diversion for a bit, then came back, and now I'm doing deployment. Ben and I met because... how did we first meet? I guess just from Twitter and Discords and stuff like that. I'm not really sure exactly how, but I saw you were working on this thing called Slinkity, which I just thought was really cool because it was a lot like some other things I saw coming up.
00:12:20 - Anthony Campolo
I saw Astro coming up, and I knew people were into Eleventy, but there was no way to get it to work with React. You had this idea about how do we get React and stuff to work with Eleventy. I'm like, this is really obvious that people would want this. And you were working on it. You had a whole library. I helped you hack on that a bit, just building examples and tutorials, and had you on my podcast. And so we've just been friends ever since. And it's really cool to see you now off in the world doing Astro and all that stuff. So, yeah, and I had kind of been falling off the Redwood and the FSJam wagon just because I got into all these different job transitions. I had been learning some new tech when I was getting into blockchain, and it became harder. I kept spreading myself thinner and thinner and thinner, and this is something that I always knew was going to be an issue and eventually kind of hit a breaking point. And then, for 2023, I got married. So I spent the whole year planning a wedding and a honeymoon.
00:13:25 - Anthony Campolo
And so then it was like, I'm doing my work and my wife, and that's my life. And yeah, so that tweet came on the last day of my honeymoon when I was like, all right, I'm about to go back into the real world. I want to refocus my life, think about what do I really want to do with my time, who are the people I want to associate with, what are the projects I want to actually devote myself to? And I was thinking about, like, it's still just FSJam and Redwood. You know, there's nothing I've really done since that's given me as much personal fulfillment and led to as many great connections and been as professionally rewarding and intellectually rewarding. Just all those things. They were never financially rewarding, which is the biggest issue. But I'm in a space now where I make a decent living, and I'm living pretty cheaply relative to how expensively I could be living in other places. So, yeah, it just makes a lot of sense. So part of that is coming onto streams like this to show off the new new with Redwood.
00:14:25 - Ben Holmes
Oh, yeah. And I totally get what you mean about... well, first off, it sounds like your priorities are straight because some people would... I remember some crazy story from Cassidy Williams, actually, on how she was working on, I think, a Coursera course up until like the day before their wedding. And that was her. It's like, no, I gotta do this.
00:14:51 - Anthony Campolo
Yeah, I know my wife would not be happy about that.
00:14:53 - Ben Holmes
I mean, no, I totally get it. And also what you said about frameworks, that resonates. I think I tweeted this at one point, that every developer should build their own framework at some point. Not saying it should reach widespread adoption or that anyone would use it, but probably the time that I spent building Slinkity is still the most I learned in the shortest period of time. And I'm sure, contributing to Redwood, you also get that experience because you're not using the thing, you're shaping the thing. I don't know if you're involved in RFCs or code contributions or just documentation and devrel, but there are a lot of facets that you can get involved in too. So what parts are you involved in over there?
00:15:40 - Anthony Campolo
Yeah, I've always been on the devrel side, always on the kind of content-creation side. I think the way I do it is I tend to build content and examples like a week or two before I really should. So I end up QA-ing stuff as I do it. So I find that's where I could really add some value without necessarily writing code for the framework. Once stuff... they're like, yeah, it's basically done, pretty much. Build stuff for it. I'm like, are you sure? We're going to find out. I remember with you in Slinkity, I was hacking on Slinkity. I'm like, how do you deploy this? And you're like, oh, I've never deployed this. What do you mean?
00:16:22 - Ben Holmes
Why would you do that? Who does that?
00:16:26 - Anthony Campolo
So that's the type of stuff where I find I could add a decent amount of value. Yeah. Early QA is highly undervalued, as Nate here is saying. So I like doing that. And then as I'm doing that, I learn things about it as things break, and then I ensure that there's a nice golden path with a hello-world example. I think just having a good hello-world example... some developers will think that's totally trivial, and it's like, okay, well then why don't you have one? If it's so trivial, then you should be able to build one very simply, which they usually don't. So I don't think it's as trivial as people think. That's kind of what I see as my main value add, is that I can write you a tutorial that will ensure the newbiest noob who shows up to your project will have at least something working, even if it's very basic, even if it doesn't show off all the cool hot features that your framework does. They will at least have a project running on their local machine so that they can build something themselves. I think that itself is something that has to be table stakes for every framework.
00:17:26 - Ben Holmes
Totally, yeah. When you did that for my framework, it was the unofficial docs for a bit until documentation got more robust. And you also own the SEO, so I mean, kind of, yeah, it's true. As long as you link to the project, who cares?
00:17:40 - Anthony Campolo
You know, that's the real benefit of doing it slightly early, is that yes, you can capitalize on the SEO. I've done this with a couple of frameworks. My SolidStart one was doing pretty good for a while, but I think that kind of started falling off because everyone started writing about that at a certain point.
00:17:55 - Ben Holmes
Yeah, it's crazy. So I know that we are tighter on time than I normally am for a stream, so I'm going to at least introduce our characters here. So, pulling up my screen share, we are checking out good old RedwoodJS. Icy title for this stream. I didn't even say it was Redwood. I just said React Server Components without Next.js. What does that look like? What does that mean? As far as I know, this is the first mature framework that is releasing something that you can try experimentally. They won't be the last to use RSCs, but this might be the first framework to do it. Am I right about that?
00:18:36 - Anthony Campolo
It depends whether you consider Gatsby a real framework.
00:18:42 - Ben Holmes
We won't get into that.
00:18:46 - Anthony Campolo
I've not used it. I've heard that Gatsby has React Server Components, but... but okay, I didn't know that Gatsby... so I don't know. But yeah, I think this is where we're, even more so than Gatsby, not just saying we implement React Server Components. Redwood is saying we are migrating our core infrastructure to React Server Components. We're going all in. That was the term Tom used: all in. We were going all in. We're going all in. Listen to the All In podcast, which is weird because Redwood is a GraphQL framework. And as React Server Components have been coming out and we've been talking about all these things like suspense and error boundaries and data fetching and data loading and things, I keep being like, well, Redwood has done all that stuff since day one with our cool GraphQL API. I have yet to figure out what we actually get from React Server Components that we didn't get before, beyond letting people who complain about GraphQL stop complaining about GraphQL.
00:19:50 - Ben Holmes
Yep. When I talked to Dan Abramov, and I say this a lot, the first thing we talked about was how it replaces the philosophy of GraphQL, where the problem you run into building a front-end app is you send too much data and you bundle it into all of your props and it's a bad time. GraphQL was a way to selectively choose parts of API data that the browser needs to show the page. Before, you could do that with GraphQL to make truncated JSON. But now with server components, it's just embedding straight into the HTML. Instead of having a separate endpoint, choosing parts of that endpoint that you need and coming back, you're instead just using map inside of a JSX component. You're writing lists with the parts that are actually needed to display user profiles or whatever else.
00:20:43 - Anthony Campolo
But that's...
00:20:43 - Ben Holmes
So it's at the server level because...
00:20:44 - Anthony Campolo
it is hitting a server.
00:20:47 - Ben Holmes
Yes, servers that return HTML. And I know up until now Redwood was, am I right, mostly a client-only SPA with helpers to query from GraphQL?
00:21:01 - Anthony Campolo
So it's... yeah, so it didn't do SSR in the traditional sense. Like, at runtime we had prerender, so if you had a static page without any interactivity, you could basically build that statically. And so we had that ability. So basically the only thing we haven't been able to do is pure SSR, which, because we were doing GraphQL and because of how the architecture was set up, was never really that big of an issue. It was more so an issue because everyone was doing SSR with Next and would show up and say, how do I do SSR? And we're like, well, you don't necessarily need it. And for all these reasons they'd be like, well, sorry, I want SSR, period. It's like, well, yep.
00:21:47 - Ben Holmes
Yeah, it's true. And I mean, what is the target app for Redwood? Like, what is the sweet spot of something I'm building? Because I see it's geared towards startups that are, you know, trying to scaffold something, but that encompasses any kind of website in my mind. So I don't know what specific...
00:22:05 - Anthony Campolo
Yes, yeah. Yes and no. I would say it's similar to what you would get from Ruby on Rails, in that you want to have an app that's like a CRUD-backed, database-backed CRUD app with users. That's kind of what I think of as the sweet spot. And that is different from a static website without users or a front-end framework with a little bit of back-end stuff. It really... and someone's saying in the chat, you know, batteries included. Yeah, the term full stack is thrown around all the time. I think Redwood is legitimately a full-stack framework by almost anyone's definition. Someone's here like, why are you pimping a competitor to Astro? I would not consider it really a competitor to Astro, even though Astro is starting to slip into this more app-like thing. And it's like the one thing... and they're also saying here, I want user management and authentication. And that's one thing that Redwood just blows other frameworks totally out of the water on.
00:23:03 - Anthony Campolo
Like we have a whole RBAC implementation, role-based access control. No other framework has that. I can tell you for sure.
00:23:11 - Ben Holmes
Probably not. And certainly not Astro, to the point someone was mentioning as competitors. I actually work with Keyboard Cowboy a little bit. We've been talking about how he might be using Astro for something with users, with CRUD operations, because I'm experimenting with that. I want to kick the tires there. We have a dual message on our homepage right now. I feel like it's that side of CRUD where we're still taking the primitives and turning them into best practices, letting community build libraries around it and then use those to say, oh, that's how authentication typically works. Let's pull that into core or make this library the recommended way to do it. Or role-based permissions. Like, if there is a user library for Astro to do that, then we can use that to inform things in the future.
00:24:02 - Anthony Campolo
Yeah, so I use Astro a lot. My personal site is Astro. And so actually I'd be curious, just real quick, to talk to you about this because that whole process you're talking about, I think it's great. The only note I would have is that it's really hard to tell which plugins are official and which ones are supported and which ones are just a user kind of one-off thing because there's different places to find them. And something like, I think, what's the one? Like the sitemap one or the RSS one is one of those two. It has its own docs page, but it's not in the official plugins list. So it's like, this looks more official than an official plugin, but it's not in the official plugins list. So you have stuff like that where it's hard to tell, is this supported or not?
00:24:45 - Ben Holmes
Okay, I'll need to look into that because I know we have an integrations landing page where we flag things that are Astro owned versus third party, but maybe we're just missing some things on that page.
00:24:54 - Anthony Campolo
Yeah, so yeah, I think that's kind of the thing. I think there's some that have kind of fallen through the cracks. So they're not in the official integrations page, but they're clearly built by the team, as far as I can tell.
00:25:05 - Ben Holmes
Yeah, yeah, I won't go down that rabbit hole, but that is good to audit. I know RSS is a funky one because it's not an integration, it's just like a helper API to make endpoints, and ah, that's why I think that... yeah, it's not the first time people said it, so I feel like just call it an integration even if it isn't. It'll make it more discoverable.
00:25:23 - Anthony Campolo
So if you're importing it and you're putting it in your Astro config, you know, like, yeah, those should all be in one bucket. Yeah, totally.
00:25:31 - Ben Holmes
Yeah. But I mean what we've been talking about there is things that are very CRUD. Up until now I have preferred client-driven, config-based routing, React and suspense and loading spinners wherever you need them. But it's definitely a decoupled set of endpoints that hydrate into a client-side app. And that's something Astro is just trying to ride in on as: take your Create React App, plop it into an Astro index route, and then slowly move things towards Vite, move endpoints and others into Astro endpoints, so on and so forth. Maybe it's not the best way to do it, but if you're in that crowd already, it's a way towards adoption. Yeah, it sounds like Redwood up until now has been close to that, but way more batteries included.
00:26:19 - Anthony Campolo
It's been the type of thing where if you want to use React and GraphQL and you want a full batteries-included framework, then Redwood has been the only way to do it and do it really nicely. I think getting to having SSR and things like that has been what people kept asking for. And also just the GraphQL thing in general. People seem to be kind of moving away from it. I've always really liked GraphQL. I think that when people talk about the issues of GraphQL, they're usually thinking about what it would be like to build their own GraphQL framework, not necessarily to use a full-featured GraphQL framework, because they'd never used them before. So I wish more people would have given Redwood a shot with GraphQL. I think it would have changed a lot of people's minds. But at a certain point you have to admit, you know, people want what they want. You can't force someone to change their mind. Unless, you know, we implemented a totalitarian communist GraphQL society. So, you know, here we are. We're giving them what they want. Giving the people what they want.
00:27:19 - Anthony Campolo
Oh, and I was gonna say, Vite. We didn't support Vite until very recently as well. So getting Vite in has been part of the SSR journey because we were using webpack for the longest time, and it was like, how do you even do that? How do you do SSR with webpack? I don't even know.
00:27:37 - Ben Holmes
There's a reason they're moving off of webpack on the Next team. And also getting RSCs to work in Vite, are you saying... and I guess we'll try it... but these early experiences of React Server Components are built on Vite?
00:27:52 - Anthony Campolo
Yes, yes. And this is... I hadn't even thought of this, actually, because as you're pointing out here, since Next is not using Vite, we're probably the first people to ever do this.
00:28:02 - Ben Holmes
Yeah. If you got it working, I mean, that feels like a generic-spec way for it to happen.
00:28:06 - Anthony Campolo
It's working in the sense that it ran on my machine. We're going to find out how well it works now that Ben tries it.
00:28:13 - Ben Holmes
No, totally. And we have an example app that we want to.
00:28:18 - Anthony Campolo
I was on Ryan Carniato's stream about two months ago, and it was just barely not working. We were right up to the point where it would have worked if there wasn't one single last Vite bug. But there was. I think since then that has been fixed.
00:28:34 - Ben Holmes
Nice. I embarrassingly closed my Discord to save on CPU. So if you could share the link in our video chat, I can pull up the link.
00:28:46 - Anthony Campolo
Do you already have dependencies and stuff installed?
00:28:49 - Ben Holmes
I don't.
00:28:50 - Anthony Campolo
Okay, so you should do that. That's going to take a second. While you're doing that, we can show the repo.
00:28:58 - Ben Holmes
Totally.
00:28:59 - Anthony Campolo
We'll share two links here. One of them is going to be a list of all of our React Server Components examples, and then one is going to be a specific AI-based example that we'll look at.
00:29:13 - Ben Holmes
Nice. We have a bunch of demos in here. These are all RFC-level proofs of concept, right?
00:29:23 - Anthony Campolo
Yeah. So this is all on Redwood 7. Yeah, this is just being built by Toby. This is mostly just for people like me who want to have examples that are already running and capable of sharing and iterating on. So if you were to install Redwood from scratch and go through the docs and everything, you'd be on version 6, not version 7, and none of this stuff would work or be in the framework or your project would not be arranged in this way, with all of your server entry files and stuff like that. Let me look over. You should zoom in a lot with your text.
00:30:02 - Ben Holmes
I will do. There we go. One more notch. There we go.
00:30:09 - Anthony Campolo
Can you go back to the git repo?
00:30:11 - Ben Holmes
Yes. I'm just going to... should I run pnpm install, or y'all are a Yarn house?
00:30:16 - Anthony Campolo
We're a Yarn-only. Yeah, that's something I've been complaining about for a while, but we're kind of locked in for legacy reasons.
00:30:27 - Ben Holmes
Yeah, I don't know what version of Yarn I'm on, but it's installing, so we're gonna let that happen.
00:30:31 - Anthony Campolo
Yeah. If you have Yarn at all, it's configured in a way where it notices that you need Yarn 3 and just does it. So that's kind of the biggest issue with Yarn right now, is that you need a Yarn config file or even running Yarn will confuse it. So with Redwood it's already configured correctly. So you can usually just, as long as you have Yarn at all installed, it's going to work for you. But anyway, you see here at the bottom this list of Redwood RSC demos. And that's where if you look... I know you built these RSC proofs of concept from the beginning. So when you look at terms like server mutations, form server actions, you know what that means. Most people probably don't. Most don't.
00:31:17 - Ben Holmes
And we can poke some of these. I stray away from things... well, now server actions are officially part of the React spec, so you can talk about them a little bit more than you used to. So that's cool that you are already playing with that. I won't go deep on that, but I'll check out suspense because that's what I've built before, and this has... yeah, message counter in suspense. I think it said to go to app.tsx to see how it's wired up.
00:31:51 - Anthony Campolo
Yeah. Okay, cool.
00:31:56 - Ben Holmes
Interesting. First off, easy file-based routing.
00:32:04 - Anthony Campolo
Go back to src. Let me look at a few things here. Let's look at our... there should be a routes.tsx file.
00:32:15 - Ben Holmes
Oh, okay. Because I know y'all have been config-based for a while.
00:32:21 - Anthony Campolo
Yeah, exactly. Okay, cool. So this is not... so this is how we did it in the past. And you see here there's no route that points to your home page. So how this is going to get to work with everything, I have no idea. Basically what we're doing right now is we're just implementing like a single-page RSC. I guess it's probably going to be kind of like the app directory in Next. So right now we're kind of implementing that, and we're building it in even though it has nothing to do with the rest of the framework.
00:32:53 - Ben Holmes
Yeah, it seems different. Okay. It really is.
00:32:56 - Anthony Campolo
Yeah. Yeah. Redwood was not built for this. I really have no idea what we're going to do once it is working and how we're going to integrate with the rest of the framework. But this is where we're at right now. If you go back to the app file, that is going to be your home page. That's going to render into your index.html. Totally. Then you have a document.tsx and some other things like that.
00:33:22 - Ben Holmes
Yep, yep. Interesting. So this isn't how y'all want it to work. Y'all honestly aren't sure about routing yet, but it could be just Next.js-based until y'all can innovate on something else.
00:33:38 - Anthony Campolo
Yeah, I guess. The question that I am most curious about is, how is this all going to integrate with Prisma? Because with Prisma, that would give us a model. We would use that model to generate a GraphQL schema. That GraphQL schema could then be used to generate a CRUD application, and then that would give you also the routing. You know, like if you had a blog, it would create individual pages for each blog post and it would create an edit page for each blog post and all that stuff. So we're probably going to lose a lot of that scaffolding ability as we're doing this. What I'm guessing is going to happen is we're going to get RSC working and then back ourselves out, rebuild the rest of the framework around that. That kind of seems like the most logical strangler-pattern type way of doing this. That's all going to be things we figure out in the future. But right now it's just like, how do we get RSC working in the first place? By that we're basically just building in all this stuff that you would have with your Next or SolidStart or Remix.
00:34:46 - Anthony Campolo
You have an entry client file and entry server file. You have a document file, and then all that stuff basically figures out how to slot the right things into the right places.
00:34:58 - Ben Holmes
Yep. Interesting. So I'll admit I know Redwood generates a lot, but I don't know how much it generates. You hinted at a couple things, like, if I have a Prisma file that has blogs or blog posts as a table, then does it generate endpoints for me? Does it generate resolvers? Or is there some amount of manual...
00:35:23 - Anthony Campolo
Setup there? In the past, GraphQL. There's no endpoints. There's an endpoint, and then you have a schema. It would generate your GraphQL schema, and then you have your createPost, updatePost, deletePost. Those are your resolvers, and those are part of the schema. You don't need anything else except your GraphQL endpoint. You send your GraphQL queries, and that includes your mutations and your queries. So, as I said, all that goes out the window now. So how that's all going to work, I'm not sure.
00:35:58 - Ben Holmes
Okay, so this is sounding more and more like this is a playground to see if this will work at all, because there's no official RFC on the Redwood side saying, this is the future.
00:36:11 - Anthony Campolo
Well, that's not true. There was an RFC. What we're doing right now has already deviated from that. So that's why I'm not really, like, okay, showing the RFC and being like, this is how we're going to do it. Because I already know that's not how we're going to do it. We've already deviated from the RFC. This is why everyone's complaining about React Server Components, because it's hard, it's new, it's not even fully baked in React, so it can't really be fully baked in the frameworks either. We're all iterating on this at the same time. I wish I could be like, yes, Redwood figured it out, it's perfect, come and use it, and it'll be production-ready. It's like, we're not really even close to that. But we're saying, hey, we're trying to create an alternative for people who want to use server components and don't want to use Next or don't want to use just React proper. They want a more full-featured framework. So this is still really aimed at enthusiasts who want to work on this new tech and want to help push it forward. If you want to build a production app with Redwood today, use GraphQL.
00:37:11 - Anthony Campolo
I'm serious. It will be very, very stable. It'll do what you want it to do. It has a million helper things built in that will make GraphQL very easy for you. So that's kind of where we're at in terms of how we're pitching this right now. It's really hard to say, hey, we're an app for production apps that are being built by startups being funded millions of dollars, and also be like, hey, we have this brand new thing that's totally broken in all these ways. So a little bit of a parallel-universe type thing happening.
00:37:39 - Ben Holmes
No, I... to this day tell newbies, like if a friend were to ask me, I'm trying to build a CRUD application, what should I use, I would say Next.js Pages Router before I say App Router because I know that they'll have years of blog posts to fall back on. I know there will not be a single experimental hook in their app when they build something that works well. So I'm just comfortable recommending it. But I'm not comfortable with App Router yet. It's just the trouble of, I'll admit, how they've marketed it, how they've pushed it forward. It feels more stable than it is, and it feels like there's more built in than there is. And it sounds like Redwood has a higher bar because Next.js leaves a lot to you still. Like, Next.js doesn't have a database opinion. They don't have a GraphQL opinion, certainly. But Redwood does. Redwood's very batteries included. So I would expect Redwood to be slower to make this the christened way to do things.
00:38:35 - Anthony Campolo
Yeah. And once we get there, that means we're going to be able to offer a lot more. We'll be able to say, hey, we're on RSC. And also we have the whole back end figured out for you as well. That's going to be really fun once we get there, but we should probably try getting this AI thing to run in case anything breaks and we have time to troubleshoot it.
00:38:56 - Ben Holmes
We'll see if we can get it running.
00:39:01 - Anthony Campolo
Make sure you get your API key in before you do anything else.
00:39:04 - Ben Holmes
Yep. I've got it in my 1Password, so I will hide my screen share, copy it, come back. But we've got this right here. Redwood build and serve. Let's go ahead and run these.
00:39:19 - Anthony Campolo
Yes. What this is doing, this is basically just running a build command and then a serve command, which is like in Astro, you know how you can preview what is built in your dist folder kind of thing. So this will not work if you just kind of try and throw this into Netlify, because it's basically just running a server. You can stick this in a Docker container. You can run this with PM2 on a DigitalOcean or something like that. Right now this is just running your server, basically.
00:39:54 - Ben Holmes
Gotcha. It looks like it's popping up something for EditorConfig, and we can ignore that. I know EditorConfig is opinionated. I don't know what it does. I just know it's different from VS Code, but I'm going to ignore those.
00:40:10 - Anthony Campolo
Yeah, I don't use any of this kind of stuff usually, so I always ignore those kind of things. You see also we have a Gitpod, though. You can do all this in the cloud, allegedly.
00:40:19 - Ben Holmes
Yeah. And I will try that if we run into any issues.
00:40:23 - Anthony Campolo
But we've got no idea if we even got the Gitpod thing working for the RSC examples.
00:40:28 - Ben Holmes
Yeah, who knows? But you've got the button over there. If it runs, it runs.
00:40:33 - Anthony Campolo
And for your OpenAI API key, that's what the env needs to be named.
00:40:40 - Ben Holmes
Gotcha. And there's probably an example in here too. Well, not for that.
00:40:44 - Anthony Campolo
No, no, that example is incorrect.
00:40:48 - Ben Holmes
That's fine. Do we need these?
00:40:50 - Anthony Campolo
Yeah, this is where me being the devrel example person could come in and make those small tweaks that would help. Right now basically Toby just explains everything in the README.
00:41:02 - Ben Holmes
Oh, totally. I can head back over here just to be sure. But yeah, no matter whether...
00:41:09 - Anthony Campolo
Don't use any of those.
00:41:10 - Ben Holmes
Shouldn't use any. No problem.
00:41:12 - Anthony Campolo
Yeah, no, just have a single...
00:41:13 - Ben Holmes
Just.
00:41:13 - Anthony Campolo
You want a single? Yeah, just the OpenAI API key. Ignore everything else. That's at least what the project I had running that worked did. So let's keep that all the same. Okay.
00:41:26 - Ben Holmes
And I'm opening up my 1Password right here. I've got my key.
00:41:31 - Anthony Campolo
I avoid using 1Password for anything except my actual passwords because I worry about making it the uber entry point to my entire life. That seems like actually a really bad idea.
00:41:42 - Ben Holmes
It does. And I have never used it for environment variables until now. They just made it easy enough that I was like, well, I'll try it for this. It's like, so we can hop on stream.
00:41:53 - Anthony Campolo
Not a huge security issue if this does leak, so...
00:41:57 - Ben Holmes
Yeah, also that. Well, I mean, I have no credit card attached, so you can't really do anything.
00:42:03 - Anthony Campolo
The main thing is if you ever do start doing some OpenAI stuff, you can set a usage limit on your API key so they can't go past, like five or ten dollars. That's the move. Because if it does leak and someone just runs off with your key, they can charge a lot of money to your account, actually.
00:42:20 - Ben Holmes
Yeah. Yeah, I bet they can. Everyone's trying to do that too. If we head back over here, I saw it was 8910. Is there a reason for that number?
00:42:33 - Anthony Campolo
8, 9, 10. Easy to remember.
00:42:36 - Ben Holmes
Oh, okay.
00:42:38 - Anthony Campolo
Everyone's got their own number, so 8, 9, 10.
00:42:42 - Ben Holmes
Okay, fine. I mean, nothing can beat Astro's 4321.
00:42:47 - Anthony Campolo
But yeah, whoever thought of having numbers in sequential order as a port number? Certainly no one has ever done it before.
00:42:55 - Ben Holmes
No one's ever done it. No one's ever done it. No framework's done it. Oh, okay. So we're on a technically basic...
00:43:02 - Anthony Campolo
You gotta remember four numbers, Redwood. You only have to remember three because 10 is a single number.
00:43:13 - Ben Holmes
I'm gonna be friendly to it. Okay, so we're lost in space, but we did see something. Okay, let's see. No chat model was specified. Okay.
00:43:27 - Anthony Campolo
Oh, that's because... the key. So if you put the key in... yeah, restart your development server if you put the key in after you started it.
00:43:34 - Ben Holmes
No problem, Keyboard cowboy. I accidentally published a demo app with the API key in the JavaScript. It's so easy to do with client apps.
00:43:48 - Anthony Campolo
Well, it's actually... so this is cool, actually, because Microsoft owns OpenAI, effectively. If you upload your API key to GitHub, it will actually automatically shut your key off because it can detect it and then basically make sure it doesn't do anything.
00:44:05 - Ben Holmes
That's crazy.
00:44:07 - Anthony Campolo
Yeah.
00:44:09 - Ben Holmes
that's tight integration. Oh, no. Okay. All right. It's so over. We're so back. We're so back.
00:44:18 - Anthony Campolo
Then someone has a question about deployment, which I'll answer as soon as we get this...
00:44:23 - Ben Holmes
Okay, so we got a little further. This time: You exceeded your current quota. I have not pinged this ever.
00:44:30 - Anthony Campolo
Okay, so let me give you my key. I think that's because you didn't put in a credit card. I didn't expect yours to actually work.
00:44:38 - Ben Holmes
Oh, you need one for even just free access.
00:44:41 - Anthony Campolo
Okay, so I shared it in our shared Ping chat. Is that going to work?
00:44:49 - Ben Holmes
Let me hop over there.
00:44:53 - Anthony Campolo
Then while you're doing that, the deployment question. With what we're showing right here, all bets are off because this is not the same way we usually deploy stuff. But if you're using Redwood in the classic GraphQL way, we have a single CLI command, yarn redwood setup deploy .... You can deploy to Netlify, Vercel, Fly, Flightcontrol, my company Edgio. There's others as well. We have seven deployment targets. Pretty much all of them, you run a single command and it automatically configures your project for that specific provider. Redwood actually was created on the vision of what's called a universal deployment machine, the idea being that once you build your project and it works locally on your computer, you should be able to deploy it anywhere you want without having to do anything. So we put a lot of time and thought and effort into the deployment step itself. And I actually learned how to deploy things by working on all these different deployment targets with Redwood. It was super fun and super educational. So if that's something that concerns you, that is the one thing I can say quite confidently we do very well on. And try clicking the send button, not hitting Enter.
00:46:04 - Anthony Campolo
I don't know if that's actually going to make a difference. It probably won't because last time you got a response. Yes, it works.
00:46:13 - Ben Holmes
Okay, we've got it. All right. "Do you need Next.js to use React Server Components?" It's a good question. It's a good question. Two of my favorite topics. Well, server components are still under development, not yet available. They're going to be a game changer when it comes to server-side rendering client applications. To answer your question... yeah, they really rambled there. Server components are being developed specifically for Next.js, which is a framework on top of React. If you want to use it, you'll likely need Next.js. Hey, that's accurate. That's honestly accurate. This could change in the future. And it asked me a question: "Have you had any experience with React and Next in your web development journey?" Huh.
00:46:58 - Anthony Campolo
So I think Friendly Bot... yeah, I think Toby, I'm not sure if he put a custom prompt in or a custom model or something, but when I was messing around with it before and I was asking weird random questions about poop, which is the thing I do with GPT for some reason, and it was like, "Oh, I don't know if I want to talk about that. Let's talk about web development." And I'm like, that's not what ChatGPT would say. This is something different.
00:47:21 - Ben Holmes
Build an app to share poop jokes. What stack should I use? People do this in Copilot and it will say some things. It should. "Sounds like a fun project." Oh, it's not going to talk about poop specifically. Ooh, what is this stack? "Since you're interested..." How do you know I'm interested in that? Probably the prompt. "I recommend a couple of technologies, including React on the front end. Front end React with JSX for building the user interface. Back end Node, MongoDB." Oh, they're going MERN on this. They're going full-on MERN.
00:47:58 - Anthony Campolo
Or PERN.
00:47:59 - Ben Holmes
Or PERN. Well, I don't think Postgres is in here.
00:48:02 - Anthony Campolo
Oh yeah, Post... that's Postgres, it says.
00:48:06 - Ben Holmes
Yeah, you're right. You're right. Just one possible.
00:48:11 - Anthony Campolo
This is literally the stack that they taught me in bootcamp.
00:48:15 - Ben Holmes
It's the stack I taught at a college bootcamp.
00:48:18 - Anthony Campolo
So I know it's the stack.
00:48:20 - Ben Holmes
You know, it's the classic OG. All right, well, it works. Now I have to poke the code at least a little.
00:48:28 - Anthony Campolo
Yeah, yeah. Let's see what happens.
00:48:30 - Ben Holmes
Yeah.
00:48:31 - Anthony Campolo
So they're saying here, get some CSS on this sucker. So that'd be a good idea.
00:48:37 - Ben Holmes
I'm gonna add some dark mode. Absolutely.
00:48:40 - Anthony Campolo
That's ambitious. All right.
00:48:42 - Ben Holmes
No, it ain't. No, it ain't, because friend of the show Open Props makes this very simple.
00:48:50 - Anthony Campolo
I don't know if anyone has used Open Props with Redwood.
00:48:54 - Ben Holmes
Don't worry, we can just grab files. We're not going to actually try to bundle anything. unpkg.com, that sounds...
00:49:01 - Anthony Campolo
Yeah, I know. Open Props is pretty dang simple. It's something that I've been... if I were spending more time on CSS, I'd probably be using it a lot.
00:49:10 - Ben Holmes
Yeah, it's especially good for dark mode. It doesn't help you with the toggle. The toggle is notoriously just annoying. But respecting your system settings is baseline. If you can do that, you're probably all right.
00:49:22 - Anthony Campolo
All right, yeah. I have an Astro template that came with a dark mode toggle.
00:49:29 - Ben Holmes
Nice.
00:49:30 - Anthony Campolo
Ooh.
00:49:30 - Ben Holmes
And we have a DocumentProps... I'm going to ignore that for now, but that is interesting. Let me just do it. Oh, yeah. You can't do style blocks in JSX directly. You would need, like, a stringified version. So I'll just do a link tag. I've never done it this way, but I'm going to find out how well it works.
00:49:55 - Anthony Campolo
Yeah. So many ways to get CSS in.
00:49:57 - Ben Holmes
There's so many ways to jam it. This baby can fit so much CSS. So all we need is normalize. And I forgot to say rel="stylesheet". Amateur hour. stylesheet. Like, I'm building a Slinkity app right now using link tags. What year is this? So if I go back here... what year? Okay. I don't know if document changes will reload. We'll find out. So in our head... nah, document changes don't reload the server.
00:50:35 - Anthony Campolo
Yeah, it doesn't surprise me.
00:50:37 - Ben Holmes
Yeah, I was hopeful, but I am curious what the CSS import is. I guess that's the framework doing this.
00:50:45 - Anthony Campolo
Check out index.css. Okay. It says "array of CSS import strings," is what it says.
00:50:55 - Ben Holmes
So where's document used? Is it used anywhere? It is. It's in the server entry point. Well, that makes sense.
00:51:06 - Anthony Campolo
Yes. Check that out.
00:51:07 - Ben Holmes
All right. And now we have server entry, which is probably being passed straight from Redwood, so we can't do much there,
00:51:15 - Anthony Campolo
but.
00:51:15 - Ben Holmes
Okay, index.css. I'll just plop it in there and see what I got.
00:51:21 - Anthony Campolo
Yeah, I'm assuming that would just be for straight CSS. I'm not sure how that's going to work with unpkg or with Open Props.
00:51:29 - Ben Holmes
It should work because we're using @import, which is a browser thing, so...
00:51:37 - Anthony Campolo
This is also one of the reasons... there's so many discussions around Tailwind and stuff, but just the fact that everyone has figured out Tailwind. I like using Tailwind because it keeps me from having to figure out any of this weird CSS import stuff.
00:51:51 - Ben Holmes
Well, yes, as soon as you set up Tailwind. But it's so big.
00:51:57 - Anthony Campolo
I never set up Tailwind because every framework has already done it for me. I'm never going to have to set up Tailwind.
00:52:03 - Ben Holmes
Okay. I don't think this is being used either. It is.
00:52:10 - Anthony Campolo
Try restarting your server before you decide any of these things are not working.
00:52:14 - Ben Holmes
I know. I was seeing what hot reloading we actually get, and I am trying everything that probably won't work.
00:52:20 - Anthony Campolo
So yeah, assume that there is no hot reloading. This thing is very, very new. So any dev-time niceties you should expect not to be there.
00:52:31 - Ben Holmes
Totally. Because that's a full prod build. It looks like maybe there's no reloading.
00:52:37 - Anthony Campolo
Probably not.
00:52:39 - Ben Holmes
Yeah, that's all right. So we'll probably do mostly walking through code and not a lot of changes unless we're certain about what we're doing.
00:52:46 - Anthony Campolo
Yeah. Once we figure out the CSS thing.
00:52:51 - Ben Holmes
Let's see. Yeah, we didn't get anything. I'm sad. Yeah, it didn't work.
00:52:59 - Anthony Campolo
Actually, one last thing. Put it directly in your index HTML file.
00:53:05 - Ben Holmes
Okay. That's an idea.
00:53:07 - Anthony Campolo
Yeah, that should be the highest level, so that should work.
00:53:10 - Ben Holmes
Yeah, I don't think index.css is used.
00:53:14 - Anthony Campolo
Well, it might be. It just would only take actual CSS, or that's what you're trying to do, though, with the @import, so...
00:53:20 - Ben Holmes
Yeah, yeah, yeah. I know a regular old link tag would work. And I can actually bug-test that by realizing I'm in a browser and it is HTML. Go in here.
00:53:36 - Anthony Campolo
Should bump up your font just a little bit in there.
00:53:39 - Ben Holmes
I know it's always a problem. I started using a plugin that bumps my monitor to 1080p. I don't want to do 720, but I could do that.
00:53:48 - Anthony Campolo
I'm just saying, just in your editor right now, or in your browser right now, just Command-Plus it.
00:53:56 - Ben Holmes
Okay, so I edited as HTML.
00:53:59 - Anthony Campolo
There you go.
00:54:00 - Ben Holmes
Yeah, I rarely do this.
00:54:09 - Anthony Campolo
Old-school way.
00:54:12 - Ben Holmes404 Not Found. Okay, interesting. See, this is why we test.
00:54:18 - Anthony Campolo
now.
00:54:19 - Ben Holmes
We'd have just done that. It looks like I can't. Okay, this is a minified guy. Yeah, I was hopeful that that would do something because I know how to do this when I have a bundler. I install it, I grab the CSS that I want like this, and then I'm done. But I don't know if that's going to work here.
00:54:46 - Anthony Campolo
I mean, we could just try Yarn installing it.
00:54:49 - Ben Holmes
Okay, so let me try this. You can also just install light and dark themes, which is kind of fun.
00:54:59 - Anthony Campolo
Yeah, that looks like the move. There we go.
00:55:02 - Ben Holmes
So, boom. I don't know why the text is black, but maybe Redwood is trying to be nice about something.
00:55:11 - Anthony Campolo
Yeah, it's trying to be nice. So it gave you total dark-black text. That's the most successful, right? If everything is black, then you can see everything, right?
00:55:19 - Ben Holmes
Exactly. Oh, okay. So I think I need both the normalize and the style file. There's like a base file that you need for anything to work. Yeah, so you need this too. No problem. Let me double-check if that works. So I'll go in here as HTML: link rel="stylesheet" href="...". Boom. Beautiful.
00:55:51 - Anthony Campolo
Awesome.
00:55:52 - Ben Holmes
Look how beautiful that is. Now I'm just going to copy this into our project so we don't accidentally reload and then realize what we did. Oops, almost went to Discord. I don't know what that muscle memory was. Let's go back here. I don't think we did anything to that file. We're just gonna add a couple link tags and call it a day. Oh, we have a page reload. Wait a minute. We have a page reload.
00:56:18 - Anthony Campolo
Maybe it reloads on the index.
00:56:21 - Ben Holmes
Oh, well, Vite thinks something happened, but it can't actually push it to the browser.
00:56:26 - Anthony Campolo
Okay. Yeah. So just restart the server and then we should...
00:56:29 - Ben Holmes
You're trying, you're trying.
00:56:30 - Anthony Campolo
You really want to make reload happen.
00:56:36 - Ben Holmes
Oh, well, okay. So let's actually look at the server components here. So we'll let that spin up, and we've got everything fully server-rendered, as far as I can tell. Is there any use client at all? Oh, yeah. Probably not fully server... interesting. So we have chat state, button type submit. Oh, there's some weird stuff going on here. So let's try to read it. From app onward, we have a chat, we have a conversation, user and assistant. It's very legible. We have an input right here and a submit button. What does SubmitButton do? That returns a button, but it also has chat state, which is... oh, this is a separate module. So I'm just not going to care about that.
00:57:29 - Anthony Campolo
I guess that's just the types.
00:57:31 - Ben Holmes
Okay. Yep, yep. But this is a library that we're pulling on. You mentioned AI JSX.
00:57:37 - Anthony Campolo
Oh, yeah. So I actually did not mention that yet. That's...
00:57:41 - Ben Holmes
Well, to me...
00:57:43 - Anthony Campolo
Yeah, that's what Toby brought in to use this for. I don't really know much about this library because when I have used the OpenAI API, I use their Node implementation, which is not their JSX implementation. But I'll drop a link to this in the chat. So it's the AI application framework for JavaScript, a framework for building AI applications. Use JavaScript and JSX. You get great tools for prompt engineering. You can have the LLM render React components in its response instead of only text. That's interesting. It responds with a React component and it also...
00:58:32 - Ben Holmes
It seems like that's decoupled the whole way down. Even the pending state is: render a separate button in place of this button now, with disabled applied. That's very backwards from how I'm used to it.
00:58:44 - Anthony Campolo
I would not want to build an app like this. I would want to directly hit the endpoint, get the stuff, and then shove that into a React component. That's just personally how I would do it. But if someone's living that JSX-everything life, maybe this would make a lot of sense. Maybe for MDX-ing. Maybe.
00:59:05 - Ben Holmes
Yeah. It depends how much client-side JS is being used. Because if there's no client JS, yeah, you have to redraw the button from the server. That is very true. You're going full HTMX on them. But if it's client-side, well, I could have a useState to do this instead. But we don't know. It's the library.
00:59:25 - Anthony Campolo
Just don't know.
00:59:26 - Ben Holmes
We just don't know. Because if I inspect the page, I don't know what will be on here. Well, let's at least try it. See what resources we have. Okay, so we have a massive client bundle. Absolutely huge.
00:59:41 - Anthony Campolo
Never mind. How big is it?
00:59:43 - Ben Holmes
And this is a production build, so... and I have a feeling we won't be able to understand it.
00:59:50 - Anthony Campolo
Yeah. So how big is it?
00:59:52 - Ben Holmes
233 kilobytes.
00:59:54 - Anthony Campolo
Yeah, that's fine.
00:59:55 - Ben Holmes
Pretty big. Pretty big.
00:59:57 - Anthony Campolo
Like half the size of Next.
01:00:00 - Ben Holmes
No, Next hello world these days is 60K, 65.
01:00:04 - Anthony Campolo
Okay.
01:00:04 - Ben Holmes
They got it down. It used to be like 120. So good on them. They're getting there. But yeah, we have suspense and this is server suspense, as far as I know. And you have the fallback. That's the loading state we were looking at. This is streaming in from the server. It is not doing a client-side API call, or at least it shouldn't be.
01:00:29 - Anthony Campolo
Is that a good thing or a bad thing?
01:00:32 - Ben Holmes
Well, I think it's a good thing because instead of having to send a client component that fetches JSON and renders JSON on the browser, instead it's just rendering the text literally as text nodes as they come through. So it's like bare metal. There's no transformation, there's no components. It's just streaming that. So I think that's cool. We have 233 kilobytes to do it.
01:00:55 - Anthony Campolo
So yeah, so it's worth it. It's very fast, except for the startup cost.
01:00:59 - Ben Holmes
Except for that massive startup cost, which you don't need for server components. It's just probably how this demo is working, and it's probably bundling the AI library by accident or on purpose. I don't know. That's my...
01:01:11 - Anthony Campolo
Well, if the AI library is... well, okay. So I guess, yeah, the question is, is AI JSX actually being used on the client, or is it being used to render JSX on the server and then feed it to you? Because that would be the thing to do. It may also be, it's very possible that because of how this whole migration is happening, we're also bundling things like Apollo and the Redwood Router and all the stuff you would need to actually make Redwood work in a GraphQL way. In which case all that stuff will eventually be figured out.
01:01:46 - Ben Holmes
Yep. Oh, and I bet this is using server components because we're on the experimental Next library. That's gotta be used because we have suspense here, and we're in a server component right now. There's no decorator, so this is only built to handle server streams. They could not be doing it on the client, otherwise we wouldn't see this fallback. It wouldn't be using any server component features.
01:02:12 - Anthony Campolo
Someone's asking in the chat, are server comps JSON or are they not?
01:02:18 - Ben Holmes
They are not. I have a debugging tool you can use to see what the raw output is, but it's a proprietary format. You will literally see in the network call application/jsx text or something like that. They invented their own content type in order to manage just the smallest stream of information to help React draw elements. It's not HTML, it's not JSON. It's a third thing that's smaller than JSON that React can interpret. That's what's up.
01:02:52 - Anthony Campolo
Someone's also asking if Remix is working on React Server Components, and it's like yes, while they argue about not doing it the entire time.
01:03:01 - Ben Holmes
Exactly. Exactly. Yep.
01:03:03 - Anthony Campolo
Remix very reluctantly doing it.
01:03:06 - Ben Holmes
Yep. They seemed more excited now than they were a few months ago, at least when I spoke to [unclear] about it at a conference.
01:03:15 - Anthony Campolo
I mean, did you just see today, [unclear] tweeted about how he could rebuild all of RSC in Remix without it?
01:03:21 - Ben Holmes
Dang. Wait, rebuild without what?
01:03:24 - Anthony Campolo
He said he could get everything RSC gives you without needing RSC in Remix, is basically what he said.
01:03:31 - Ben Holmes
Okay. I'm not surprised by that comment because they might argue they've been doing that the whole time.
01:03:36 - Anthony Campolo
They would. Yeah. And they've been making this case the entire time. So it's like, oh, yeah, here. This is only 13 hours ago. So let's just get the hot gossip in here.
01:03:46 - Ben Holmes
Yep, yep. I love how we're gossiping about everything but Next.js Conf. But that is kind of the spirit of this stream. You're here, you're probably interested in...
01:03:56 - Anthony Campolo
Someone asked about my company. It's not Edgio, it's E-D-G-I-O. That's the name of the company. Edgio.
01:04:02 - Ben Holmes
Interesting. So are y'all built on top of other infrastructure, or do you own the servers and everything?
01:04:10 - Anthony Campolo
We have one of the three largest networks in the world. We have our own points of presence. That's why I say we're like a Cloudflare or a Fastly. We are our own network.
01:04:20 - Ben Holmes
You're one of them. Yeah, okay.
01:04:21 - Anthony Campolo
Yeah, yeah, yeah. And we have companies like... companies that are having ads at the Super Bowl are the type of companies that are running on us. So we are enterprise-ready, literally. It's very hard for me to make the case to any individual devs to use it because we're so enterprise.
01:04:38 - Ben Holmes
Yep, totally. And oh, man, this is spicy because it's going after React ethos. It's not just a comment, man.
01:04:50 - Anthony Campolo
I mean, I will give it to [unclear]. I think he has the cred to say something like this and have it be taken seriously because he's been in React since the beginning, and I think he has also been a lot less inflammatory than Ryan in how he communicates these things. So I thought this was great. I thought this was a very respectful, well-written hot take.
01:05:09 - Ben Holmes
I agree with that. Yeah. And I mean, I would have to see examples in order to know what he's played with or what he's doing. But I believe we could have done it without use client. I believe that, because now you can do anything without anything.
01:05:25 - Anthony Campolo
It's a computer.
01:05:27 - Ben Holmes
Yes, sure. But like, yeah, it's possible. That's a weird sentence. You're right.
01:05:35 - Anthony Campolo
That's the problem with Turing completeness. Once you understand Turing completeness, you'll understand that nothing has to ever be done the way it's done. By definition, it could be done a different way.
01:05:46 - Ben Holmes
It could be in Rust, man. It could have been. We could have had Rust in the browser. Who knows?
01:05:50 - Anthony Campolo
Yeah,
01:05:52 - Ben Holmes
Yeah. But I sympathize, you know, because Astro libraries... a year from now, when people have use client in all their React libraries, will they think, oh, when I import a use client component into Astro, I don't need the client directive, right? Because React did it. Will that be a question? Will people wonder, how do I use this? We haven't gotten it yet, luckily. But a year from now, yeah. Whoops. We did client differently. Sorry.
01:06:24 - Anthony Campolo
Yeah, it's so funny, especially with React. The downstream effects of every single little implementation change ripple out in so many ways.
01:06:35 - Ben Holmes
Yeah, yeah. That was one of Ryan's takes. I mean, he tries to be very charitable, but I could tell it's like, Solid built these amazing async primitives. We do suspense and all that really well, but we do it our own way. But React is just the behemoth, and it will inform what people ask for when they look at these other tools. Because Next.js is so big, everyone asks about ISR even though it's not a thing outside of Next.js. Same thing, if people are coming from React to Solid, they're like, where's my server suspense? And he's like, well, we did it a different way. And at some point, you kind of have to follow the herd in order to grease the wheels of adoption. Yeah.
01:07:17 - Anthony Campolo
This is what bugs me, though, about people who come from one framework to another. They're looking for similar implementations, not similar outcomes. And this is why their tech brain gets bent, because they can't think about what I'm actually trying to accomplish here. It's like, you're trying to accomplish a smooth UI with little jank, and there's an infinite variety of ways to do that. And so they're like, no, but I have achieved that by doing it this way, so if you don't do this, then you're not gonna be able to achieve that. It's like, no, we do this, and we may actually achieve what you want better.
01:07:51 - Ben Holmes
Yep. But if there's too much friction, man, it hurts.
01:07:57 - Anthony Campolo
It does hurt, but it's only friction from the perspective of someone who learned how to do it a different way. Because also, sometimes you could do it differently in a way with a better outcome, and it's actually simpler if you were to start from ground zero and had to learn one or the other. Because someone has already learned the other, relearning a new thing seems like overhead, even if the new thing is easier. That was the big problem with Redwood, is that Redwood actually did do a lot of things much easier and required less knowledge. But because they'd already spent a year learning how to use Next, they're like, oh, but I have to learn a new thing. It's like, well, it's not actually that hard to learn the new thing. And once you learn it, you're gonna find it's actually simpler.
01:08:33 - Ben Holmes
Yep. It's a tough argument, but it's one that I believe in a lot.
01:08:39 - Anthony Campolo
Yeah. Do you know anything about Nuxt server components? Someone in the chat...
01:08:45 - Ben Holmes
I know they are working on it, and I know that Daniel Roe was hinting at it because we did a stream together a couple months ago to try out view transitions and a couple other things. And they're innovating in a lot of spaces. Like, the dev tools are...
01:08:59 - Anthony Campolo
Blog post, it looks like.
01:09:01 - Ben Holmes
Oh, yeah. Nice. Nice.
01:09:05 - Anthony Campolo
Yeah, this is exciting. I saw this when Daniel put it out, and I was like, obviously this was going to happen. So it's just kind of a question of how. With Redwood it's like everyone, I think, waited like two or three years to be like, is this gonna blow over? And then it didn't. They're like, crap, we gotta do it. And so now everyone is kind of like, all right, we're doing it, let's figure it out.
01:09:30 - Ben Holmes
Yep, yep. I think they are. Except Svelte. Svelte held on, staunchly opposed to server components. So there you go.
01:09:42 - Anthony Campolo
Because they don't need it, because they already have a small client, small bundle, and all this other stuff that is the point of server components. They don't need it.
01:09:51 - Ben Holmes
Yes, and I agree with them. I've noticed in general, Vue is more open to having multiple happy paths and doing things that mirror a lot of frameworks, and Svelte is not. Svelte is more locked down. Like, I asked a question on Twitter, is there a suspense equivalent in other frameworks, like hoisting up errors from APIs or loading states from APIs? Vue is like, yeah, Vue Suspense. It works like React. Svelte, no, we have async/await, but we just don't want suspense. That seemed to track a lot.
01:10:24 - Anthony Campolo
So they want people to roll their own loading spinners?
01:10:29 - Ben Holmes
Or... say that again.
01:10:31 - Anthony Campolo
So Svelte would say, if you want suspense-like functionality, you would write that yourself with just having a loading spinner?
01:10:41 - Ben Holmes
Yeah, it's tough because if you have like multiple loading states and you want them to all bubble up to one large loading skeleton, Svelte doesn't really have a way other than hoisting all your data fetchers to one spot.
01:10:54 - Anthony Campolo
Yeah, I wouldn't do that anyway. I would only want a loading thing for a single thing that's actually loading things from the server.
01:10:59 - Ben Holmes
Yeah. Less layout shift. And now that they're really deep on SvelteKit being the christened way, I get that they're just not really focused on that pure client SPA where you're rolling everything yourself. No, everything's probably in a data fetcher, probably hoisted to the server page level, and you're probably passing it down. So we're just not going to worry about it, and no one worries about it unless they're just looking for equivalence from what they know.
01:11:26 - Anthony Campolo
Yeah, exactly. Yeah. Going back to it, they're not thinking about outcomes, they're thinking about implementations.
01:11:32 - Ben Holmes
Yep. It's rough.
01:11:35 - Anthony Campolo
So cool, man.
01:11:36 - Ben Holmes
Making us big. Yeah.
01:11:38 - Anthony Campolo
This is super fun. What else do you want to talk about?
01:11:41 - Ben Holmes
I might actually cut us off here. I had to cut off originally for 3:30. I bumped it forward a little bit.
01:11:49 - Anthony Campolo
No, that's right.
01:11:50 - Ben Holmes
Yeah. I have to deal with house things, but this has been great. I didn't expect us to have a full AI chatbot working with how experimental everything is. But hey, the master of demos himself brought us an amazing demo. So there you go.
01:12:08 - Anthony Campolo
And I didn't build this. This is full credit to Toby, who's on the Redwood team. I just cloned it down, made sure it actually worked yesterday. But yeah, I'm really glad we got to show this off. You already know so much about RSCs. I was very curious to get your take on it. So the fact that you're fairly impressed with where we're at, that's a good signal to me that we're on the right path and that we're making good progress. So very, very happy to hear that.
01:12:35 - Ben Holmes
Yeah. I mean, routing is going to be a big question, but if you're able to get server suspense in Vite, that's impressive. That is really impressive. And there's been ongoing work to do a general solution, so I'm hoping we can share that. And Astro using it as a server component bridge we don't care that much about, but if you have a server component library and you want it to work in Astro, that'll matter at some point. So we will need a bridge that can support bundling this.
01:13:03 - Anthony Campolo
Yeah, I know Astro has always looked to other frameworks for how to do things. I know Redwood is one they have looked at for some things like generator commands and the tutorial, and people have been like, hey, Redwood has a good thing here. You should check that out. Then they'd be like, oh, yeah, Redwood does have a good thing here. So I know you already appreciate what we're doing, so if you ever want to get some sort of dialogue going between the core teams, I'd be happy to set that up.
01:13:28 - Ben Holmes
Yeah. Yeah. If y'all have progress on Vite bundling, I think that's mostly what we're looking for.
01:13:34 - Anthony Campolo
Awesome.
01:13:34 - Ben Holmes
I mean, I'm looking for... it's not on the Astro roadmap, but it's on my roadmap.
01:13:40 - Anthony Campolo
The Ben Holmes roadmap.
01:13:43 - Ben Holmes
It will matter, I swear.
01:13:46 - Anthony Campolo
Awesome, man. Cool.
01:13:50 - Ben Holmes
Well, I'm gonna funnel everyone into the mainstream Next.js Conf boots-on-the-ground commentary stream, which seems to be going on right now. So if y'all want to see the boring way to use React Server Components, I mean, you can go over there, I guess. So yeah. We'll start a raid for Theo. There you go.
01:14:12 - Anthony Campolo
All right.
01:14:12 - Ben Holmes
Throw a bone.
01:14:16 - Anthony Campolo
He definitely needs your huge audience.
01:14:19 - Ben Holmes
Oh, yeah. But to anyone here who's at least curious, where can they find you?
01:14:25 - Anthony Campolo
Around Twitter, AJC Web Dev, on all the places on the Internet. AJCWebDev.com, Twitter, AJC Web Dev, Twitch, GitHub, YouTube. And then for Redwood, just RedwoodJS.com. RedwoodJS.com.
01:14:43 - Ben Holmes
There's a million ways to build a startup, and this is one of the best, one of the most fully featured. So I should actually build something with it. But good to see. Yep, we can now that you're back in the space. So there we go. Thank you all for joining. Drop a follow. We're live Thursdays, guaranteed. Satisfaction guaranteed. And thanks also for the sub, Elian. You're an amazing person. All right, go enjoy the [unclear] thing. Yep. See y'all around later.