SSR 简介

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

1. SSR 的优势

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

2. SSR 在 Bun 中的实现

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

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

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

`

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

3. 总结

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