Bun React Ssr

If you're building custom server-rendered React apps with Bun instead of reaching for Next.js or Remix, this gives you the patterns. It covers both renderToString and streaming SSR with renderToReadableStream, client hydration setup, and how to wire up Bun.serve with static file handling. The data fetching examples show passing initial state through window globals, which works but isn't elegant. You also get a basic client-side router and dev server with file watching. Honestly, this is most useful when you need SSR but want to stay light on dependencies or you're already invested in the Bun ecosystem. For anything beyond a handful of routes, you'll probably want an actual framework.

skills.sh installs: 330
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill bun-react-ssr --agent claude-code

Installs into .claude/skills of the current project.

Files

Bun React SSR

Build custom server-rendered React applications with Bun.

Quick Start

# Initialize project
mkdir my-ssr-app && cd my-ssr-app
bun init

# Install dependencies
bun add react react-dom
bun add -D @types/react @types/react-dom

Basic SSR Setup

Server Entry

// src/server.tsx
import { renderToString } from "react-dom/server";
import App from "./App";

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

    // Serve static files
    if (url.pathname.startsWith("/static/")) {
      const file = Bun.file(`./public${url.pathname}`);
      if (await file.exists()) {
        return new Response(file);
      }
    }

    // Render React app
    const html = renderToString(<App url={url.pathname} />);

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly