An early look at using server components via Bun’s new bundler, with and without React.
Server Components with Bun
AI Generated Video Summary
1. Introduction to Bun and its Features
A bun build has built-in support for server components. Server components let you use top-level await and react components that run on the server. And you can use RPC, where that lets you mix and match server-side code and client-side code, and it'll call those functions. And through compiler code splitting, it will make network requests and really easily run the code on the server without having a whole API. From Bun's perspective, useServer is mostly just code splitting. There's no React in this transform. I'm going to show you a quick demo of server components in Bun. So I'm going to refresh the page, and you can see just real quick there, you saw it said awaiting child, acing child component, and what that did.
2. Code Splitting and RPC with Client
The idea here is this makes it a code splitting boundary where funcs.ts only runs on the server. And it gives a special annotation to these functions that lets you call this code on the server.
So if we look at button, we can see from buttons perspective, which is a used client component, it's only run on the client, we can just use top level away and it will call this function, which is on the server from the client. And you can still use state and the rest of react inside of these client components because these are fully executed on the client and not on the server.
So the idea here, basically, is it is a really easy way to do RPC with client, which means it lets you call functions on the server, call functions on the server from the client. If we look at the code that's generated here, and yeah, this is a little bit messy. There's a stupid bug I haven't fixed in this with where it's adding two at the end of variable names, but we can see that there's actually no React in any of these imports. This is React, but that's because this is from using JSX, but the actual server components part, which is right here, there's no React in that.