# SSR 简介

URL: https://caijiao.org/bun/deploy/ssr
Source: docs/bun/deploy/ssr.md
Description: 本章节介绍了服务器端渲染（SSR）的概念、优势以及如何通过 Bun 实现 SSR，从而提升应用的加载速度与 SEO 性能。

服务器端渲染（SSR，Server-Side Rendering）是一种将页面的 HTML 在服务器端预先渲染并发送到客户端的技术。这种方法与客户端渲染（CSR）不同，后者依赖浏览器在客户端执行 JavaScript 来渲染页面。SSR 使得页面加载速度更快，用户体验更好，同时也有助于搜索引擎优化（SEO）。

## 1. SSR 的优势

- **更快的页面加载**：因为页面在服务器端已经渲染好，所以浏览器只需要显示已生成的 HTML，而不需要等待 JavaScript 加载完成后再渲染页面。
- **更好的 SEO**：由于页面的 HTML 在服务器端就已经完全渲染，搜索引擎能够更好地抓取和索引页面内容。
- **提高首屏渲染速度**：SSR 可以有效减少首屏加载时间，用户在页面加载时能够看到内容，减少白屏现象。

## 2. SSR 在 Bun 中的实现

[Bun](/bun/) 支持服务器端渲染，你可以使用 Bun 来构建高效的 SSR 应用。通过将渲染逻辑转移到服务器端，Bun 提供了一种快速的方式来生成动态内容，并在每次请求时将已渲染的 HTML 发送到客户端。

```javascript
import { createServer } from 'bun';
import { renderToString } from 'react-dom/server';
import App from './App';

createServer({
  fetch(req) {
    const body = renderToString();
    return new Response(body, {
      headers: {
        'Content-Type': 'text/html',
      },
    });
  },
}).listen(3000);
````

在上面的代码中，使用 Bun 创建了一个基本的 SSR 服务，并通过 `react-dom/server` 渲染了 React 组件。

## 3. 总结

SSR 技术可以显著提高页面加载速度、优化 SEO 和增强用户体验。Bun 的高效渲染能力使得实现 SSR 更加简单和快速，适合用于构建现代化、高性能的 Web 应用。