jarle/Bun Server-side render (SSR) a React component
skills/bun-guides-ecosystem-ssr-react/SKILL.md
Server-side render (SSR) a React component
$ install --global
skillsauthnpx skillsauth add jarle/bun-skills Bun Server-side render (SSR) a React componentInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 6, 2026, 2:19 AM4.0s1 file scanned
SKILL.md
- name:
- Bun Server-side render (SSR) a React component
- description:
- Server-side render (SSR) a React component
Server-side render (SSR) a React component
To get started, install react & react-dom:
# Any package manager can be used
bun add react react-dom
To render a React component to an HTML stream server-side (SSR):
import { renderToReadableStream } from "react-dom/server";
function Component(props: { message: string }) {
return (
<body>
<h1>{props.message}</h1>
</body>
);
}
const stream = await renderToReadableStream(<Component message="Hello from server!" />);
Combining this with Bun.serve(), we get a simple SSR HTTP server:
Bun.serve({
async fetch() {
const stream = await renderToReadableStream(<Component message="Hello from server!" />);
return new Response(stream, {
headers: { "Content-Type": "text/html" },
});
},
});
React 19 and later includes an SSR optimization that takes advantage of Bun's "direct" ReadableStream implementation. If you run into an error like export named 'renderToReadableStream' not found, please make sure to install version 19 of react & react-dom, or import from react-dom/server.browser instead of react-dom/server. See facebook/react#28941 for more information.
Related Skills
jarle/Bun TypeScript
development
VerifiedTrustedCommunity
Using TypeScript with Bun, including type definitions and compiler options
1SKILL.mdUpdated Apr 6, 2026
jarle/Bun Writing tests
development
VerifiedTrustedCommunity
Learn how to write tests using Bun's Jest-compatible API with support for async tests, timeouts, and various test modifiers
1SKILL.mdUpdated Apr 6, 2026
jarle/Bun Snapshots
testing
VerifiedTrustedCommunity
Learn how to use snapshot testing in Bun to save and compare output between test runs
1SKILL.mdUpdated Apr 6, 2026
jarle/Bun Runtime behavior
testing
VerifiedTrustedCommunity
Learn about Bun test's runtime integration, environment variables, timeouts, and error handling
1SKILL.mdUpdated Apr 6, 2026