bun-react-ssr
SolidUse when building server-rendered React with Bun, including streaming SSR, hydration, renderToString, or custom SSR without a framework.
Web & Frontend 168 stars
27 forks Updated 4 weeks ago MIT
Install
Quality Score: 89/100
Stars 20%
Recency 20%
Frontmatter 20%
Documentation 15%
Issue Health 10%
License 10%
Description 5%
Skill Content
# Bun React SSR
Build custom server-rendered React applications with Bun.
## Quick Start
```bash
# 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
```typescript
// 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} />);
return new Response(
`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React SSR</title>
</head>
<body>
<div id="root">${html}</div>
<script src="/static/client.js"></script>
</body>
</html>`,
{
headers: { "Content-Type": "text/html" },
}
);
},
});
console.log("Server running on http://localhost:3000");
```
### Client Entry
```tsx
// src/client.tsx
import { hydrateRoot } from "react-dom/client";
import App from "./App";
hydrateRoot(
document.getElementById("root")!,
<App url={window.location....
Details
- Author
- secondsky
- Repository
- secondsky/claude-skills
- Created
- 7 months ago
- Last Updated
- 4 weeks ago
- Language
- TypeScript
- License
- MIT
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
Web & Frontend Solid
bun-nuxt
Use when running Nuxt 3 with Bun runtime, building Vue/Nuxt apps with Bun, or configuring Nuxt projects to use Bun for development and production.
168 Updated 4 weeks ago
secondsky Web & Frontend Solid
bun-tanstack-start
TanStack Start full-stack React framework with Bun runtime. Use for TanStack Router, server functions, vinxi, or encountering SSR, build, preset errors.
168 Updated 4 weeks ago
secondsky Web & Frontend Solid
bun-sveltekit
Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs
168 Updated 4 weeks ago
secondsky