RSC + Client components in Bun

[asibilia]

Does anyone have a good example of how best to set up a Bun server to stream server-side React components while also hydrating client-side React? I'm looking for a concrete example of what @Jarred-Sumner demonstrates in this talk.

Currently, my simple bun server looks like this:

const server = Bun.serve({
    port: PORT,
    async fetch(req) {
        const url = new URL(req.url)

        if (url.pathname === '/' && req.method === 'GET') {
            const stream = await renderToReadableStream(
                await Layout({
                    title: 'Home',
                    children: await Home(),
                    url,
                })
            )
            return new Response(stream, {
                headers: { 'Content-Type': 'text/html' },
            })
        }

        if (url.pathname === '/login' && req.method === 'GET') {
            const stream = await renderToReadableStream(
                await Layout({
                    title: 'Log In',
                    children: await Login(),
                    url,
                })
            )
            return new Response(stream, {
                headers: { 'Content-Type': 'text/html' },
            })
        }

        return new Response('404!')
    },
})

console.log(`Listening on http://${server.hostname}:${server.port}`)

This works great for rendering server-side components, but I don't get any client-side functionality in my "client" components (state, etc.).

I'm looking to achieve something like this:

PS. I'm specifically trying to use a Bun server for this. I am not looking to run a framework (NextJS) with the bun command. Lots of solutions I've found online for setting up a web app with RSC in Bun start with some form of "just install NextJS, then run bun run dev!"...

[Overdozed]

what you need is described right here: https://react.dev/reference/react-dom/server/renderToReadableStream#rendering-a-react-tree-as-html-to-a-readable-web-stream

bootstrapScripts: ['/main.js'] is your missing piece where you can put your code to hydrate client side. In my case it was working as expected.

you need to build your main.js before (using bun or another bundler).

[AngelAlexQC]

I'm working in a basic approach to use ssr + hydration with react, any pr is welcome
https://github.com/bunstack-js/bunstack

[TomasHubelbauer]

I went looking for Bun RSC support after reading Dan Abramov's new article here:
https://overreacted.io/jsx-over-the-wire/

Looks like Parcel is shipping with RSC support now https://parceljs.org/recipes/rsc so hopefully Bun's bundler adds official support soon.