使用 React 和 Bun 构建的服务器端渲染（SSR）

React + Bun 服务端渲染项目分析文档

1. 项目概述

这是一个基于 React 19 和 Bun 运行时的轻量级服务端渲染(SSR)应用。项目实现了基础的 SSR 功能、路由系统、组件化架构，并使用 TypeScript 进行类型管理。

2. 项目结构

项目采用了清晰的模块化结构，遵循组件与页面分离的设计原则。主要代码位于 src/ 目录下，入口文件为 app.tsx，组件和页面分别存放在 component/ 和 page/ 目录中，静态资源则集中在 public/ 目录。

csharp 复制代码

├── src/
│   ├── app.tsx            # 应用入口和服务器配置
│   ├── component/         # 通用组件
│   │   ├── layout.tsx     # 页面布局组件
│   │   └── tab.tsx        # 标签页组件
│   ├── page/              # 页面组件
│   │   ├── about.tsx      # 关于页面
│   │   └── home.tsx       # 首页
│   └── public/            # 静态资源
│       ├── base.css       # 基础样式
│       ├── jquery.js      # jQuery 库
│       └── main.js        # 主脚本
├── package.json           # 项目配置和依赖
└── tsconfig.json          # TypeScript 配置

3. 技术栈与依赖

技术/依赖	版本	用途
React	^19.1.1	UI 库，用于构建用户界面
React DOM	^19.1.1	React DOM 渲染，包含 SSR 相关 API
Bun	latest	新一代 JavaScript 运行时和工具包，用于服务端渲染和运行
TypeScript	^5	类型系统，增强代码健壮性
jQuery	-	客户端 JavaScript 库

4. 核心功能模块

4.1 服务器与路由系统

项目使用 Bun 的 serve API 创建 HTTP 服务器，实现了简单而高效的路由系统。路由配置采用 Map 数据结构存储，支持静态资源服务和动态页面渲染。

关键功能点：

在 3000 端口启动 HTTP 服务器
支持静态资源请求处理（/public 路径下的文件）
动态路由匹配与处理
404 错误处理机制

tsx 复制代码

// 路由定义示例
const router = new Map<string, (req:Request)=>ReactNode>()
router.set('/', (req: Request) => {
    const meta: MetaType = {
        title: "首页",
        keyword: "首页,关键词",
        description: "首页,描述",
    }
    return <Home meta={meta} />
})

4.2 服务端渲染机制

应用使用 React 19 的 renderToReadableStream API 实现服务端渲染，这是 React 推荐的流式渲染方法，相比传统的 renderToString 具有更好的性能和用户体验。

tsx 复制代码

// 服务端渲染实现
const html = await renderToReadableStream(routeHandler(req));
return new Response(html, {
    headers: {
        'Content-Type': 'text/html;charset=utf-8',
    },
})

4.3 布局与元数据管理

Layout 组件提供统一的页面结构，并支持元数据（如标题、关键词、描述）的动态配置，有利于 SEO 优化。

关键功能点：

统一的 HTML 文档结构
动态元数据注入
全局样式和脚本引入
子组件内容渲染

tsx 复制代码

// 布局组件定义
export function Layout({ meta, children }: { meta: MetaType, children: ReactNode }) {
    return (
        <html lang="en">
            <head>
                {/* 元数据配置 */}
                <title>{meta.title}</title>
                <meta name="keywords" content={meta.keyword} />
                <meta name="description" content={meta.description} />
                {/* 静态资源引入 */}
                <link rel="stylesheet" href="/public/base.css" />
                <script src="/public/jquery.js" />
                <script src="/public/main.js" />
            </head>
            <body>{children}</body>
        </html>
    )
}

4.4 标签页组件

Tab 组件实现了简单的标签页切换功能，支持自定义标签标题和内容，通过 index 属性控制默认激活的标签页。

关键功能点：

支持动态标签配置
默认激活项设置
基于 CSS 类的激活状态管理

tsx 复制代码

// 标签页组件定义
export function Tab({index=0,option}:{index?:number,option:Record<string,string>}) {
    return (
        <div className="tab">
            <div className="tab-head">
                {Object.keys(option).map((key,i)=>{
                    return <div className={`tab-head-item ${index===i?'active':''}`} >{key}</div>
                })}
            </div>
            <div className="tab-body">
                {Object.keys(option).map((key,i)=>{
                    return <div className={`tab-body-item ${index===i?'active':''}`} >{option[key]}</div>
                })}
            </div>
        </div>
    )
}

5. 页面组件分析

5.1 首页（Home）

首页组件是应用的主要入口页面，集成了 Layout 布局组件和 Tab 标签组件，展示了基本的页面结构和组件组合方式。

tsx 复制代码

// 首页组件
export function Home({ meta }: { meta: MetaType }) {
    return (
        <Layout meta={meta}>
            <h1>首页</h1>
            <Tab option={{
                选项1: "内容1",
                选项2: "内容2",
                选项3: "内容3",
            }} />
        </Layout>
    )
}

5.2 关于页面（About）

关于页面是一个简单的展示页面，仅包含页面标题，展示了基本的页面组件结构。

tsx 复制代码

// 关于页面组件
export function About({ meta }: { meta: MetaType }) {
    return (
        <Layout meta={meta}>
            <h1>关于我们</h1>
        </Layout>
    )
}

6. 开发与构建流程

项目使用 Bun 作为运行时和开发工具，提供了简洁的开发体验：

开发模式 ：使用 bun --watch src/app 命令启动开发服务器，支持代码热更新
构建方式：依赖 Bun 的原生打包能力
TypeScript 支持：项目配置了 TypeScript，提供类型检查和开发提示

json 复制代码

// 开发脚本配置
"scripts": {
  "dev": "bun --watch src/app"
}

8. 总结

这是一个基于 React 19 和 Bun 运行时的轻量级服务端渲染项目，实现了基础的 SSR 功能、路由系统和组件化架构。项目结构清晰，代码简洁，适合作为学习 SSR 概念和 Bun 运行时的示例项目。通过实现建议的优化，可以进一步增强项目的功能和健壮性。