跳到主要内容

服务端渲染(SSR)

概述​

服务端渲染(Server-Side Rendering, SSR)是一种前端渲染技术，它允许在服务器上生成HTML页面，并将完整的渲染结果发送给客户端。与客户端渲染(CSR)相比，SSR可以显著提升首屏加载速度、改善SEO表现，并增强用户体验。

核心概念​

1. SSR vs CSR 对比​

渲染方式对比：

SSR核心优势：

SSR优势说明：

  • 首屏加载速度：用户立即看到内容，无需等待JavaScript加载
  • SEO优化：搜索引擎可以完整索引页面内容
  • 用户体验：减少白屏时间，提升感知性能
  • 兼容性：支持JavaScript禁用的情况

2. SSR实现原理​

SSR实现流程：

SSR核心步骤：

  1. 数据获取：服务器端获取页面所需数据
  2. 组件渲染：使用React/Vue等框架渲染组件
  3. HTML生成：将渲染结果嵌入HTML模板
  4. 客户端激活：JavaScript接管页面，添加交互功能

技术实现方案​

1. React SSR实现​

基础SSR实现：

// 服务端实现
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

const app = express();

app.get('/', async (req, res) => {
  try {
  // 获取数据
  const data = await fetchData();

  // 渲染组件
    const appString = ReactDOMServer.renderToString(
      <App data={data} />
    );

  // 生成HTML
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>SSR Example</title>
        <meta name="description" content="服务端渲染示例">
      </head>
    <body>
      <div id="app">${appString}</div>
      <script>window.__INITIAL_DATA__ = ${JSON.stringify(data)}</script>
      <script src="/bundle.js"></script>
    </body>
    </html>
  `;

  res.send(html);
  } catch (error) {
    console.error('SSR Error:', error);
    res.status(500).send('Server Error');
  }
});

// 数据获取函数
async function fetchData() {
  // 模拟数据获取
  return {
    title: 'SSR页面标题',
    content: '这是服务端渲染的内容',
    timestamp: new Date().toISOString()
  };
}

app.listen(3000, () => {
  console.log('SSR Server running on port 3000');
});

客户端激活：

// 客户端实现
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// 获取服务器端数据
const initialData = window.__INITIAL_DATA__;

// 客户端激活（hydration）
ReactDOM.hydrate(
  <App data={initialData} />,
  document.getElementById('app')
);

2. Vue SSR实现​

Vue SSR实现：

// 服务端实现
import express from 'express';
import { createSSRApp } from 'vue';
import { renderToString } from 'vue/server-renderer';
import App from './App.vue';

const app = express();

app.get('/', async (req, res) => {
  try {
    // 获取数据
    const data = await fetchData();
    
    // 创建Vue应用实例
    const vueApp = createSSRApp(App, { data });
    
    // 渲染为HTML字符串
    const appString = await renderToString(vueApp);
    
    // 生成HTML
    const html = `
      <!DOCTYPE html>
      <html>
      <head>
        <title>Vue SSR Example</title>
        <meta name="description" content="Vue服务端渲染示例">
      </head>
      <body>
        <div id="app">${appString}</div>
        <script>window.__INITIAL_DATA__ = ${JSON.stringify(data)}</script>
        <script src="/bundle.js"></script>
      </body>
      </html>
    `;
    
    res.send(html);
  } catch (error) {
    console.error('Vue SSR Error:', error);
    res.status(500).send('Server Error');
  }
});

// 客户端激活
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

3. Next.js SSR实现​

Next.js页面组件：

// pages/index.js
import { useState, useEffect } from 'react';

export default function HomePage({ initialData }) {
  const [data, setData] = useState(initialData);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
      <p>渲染时间: {data.timestamp}</p>
    </div>
  );
}

// 服务端数据获取
export async function getServerSideProps(context) {
  try {
    // 在服务器端获取数据
    const data = await fetchData();

  return {
      props: {
        initialData: data
      }
    };
  } catch (error) {
    return {
      props: {
        initialData: { title: '错误', content: '数据获取失败' }
      }
    };
  }
}

// 数据获取函数
async function fetchData() {
  // 模拟API调用
  return {
    title: 'Next.js SSR页面',
    content: '这是使用Next.js实现的服务端渲染',
    timestamp: new Date().toISOString()
  };
}

Next.js配置：

// next.config.js
module.exports = {
  // 启用SSR
  target: 'server',
  
  // 自定义服务器
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: '/api/:path*'
      }
    ];
  },
  
  // 环境变量
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY
  }
};

4. 通用SSR框架​

自定义SSR框架：

// SSR框架核心
class SSRFramework {
  constructor(options = {}) {
    this.template = options.template || this.defaultTemplate;
    this.dataFetcher = options.dataFetcher || (() => ({}));
    this.renderer = options.renderer || this.defaultRenderer;
  }
  
  async render(route, req, res) {
    try {
      // 获取数据
      const data = await this.dataFetcher(route, req);
      
      // 渲染组件
      const content = await this.renderer(route, data);
      
      // 生成HTML
      const html = this.template(content, data);
      
      res.send(html);
    } catch (error) {
      console.error('SSR Render Error:', error);
      res.status(500).send('Server Error');
    }
  }
  
  defaultTemplate(content, data) {
    return `
      <!DOCTYPE html>
      <html>
      <head>
        <title>${data.title || 'SSR App'}</title>
        <meta name="description" content="${data.description || ''}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div id="app">${content}</div>
        <script>window.__INITIAL_DATA__ = ${JSON.stringify(data)}</script>
        <script src="/bundle.js"></script>
      </body>
      </html>
    `;
  }
  
  defaultRenderer(route, data) {
    // 默认渲染器实现
    return `<h1>${data.title || 'Default Title'}</h1>`;
  }
}

// 使用示例
const ssr = new SSRFramework({
  dataFetcher: async (route, req) => {
    // 根据路由获取数据
    switch (route) {
      case '/':
        return { title: '首页', content: '欢迎访问' };
      case '/about':
        return { title: '关于我们', content: '公司介绍' };
      default:
        return { title: '404', content: '页面未找到' };
    }
  },
  
  renderer: async (route, data) => {
    // 使用React/Vue等渲染
    return ReactDOMServer.renderToString(
      <App data={data} />
    );
  }
});

// Express路由
app.get('*', (req, res) => {
  ssr.render(req.path, req, res);
});

性能优化​

1. SSR性能优化策略​

优化策略图示：

2. 缓存优化​

缓存策略实现：

// SSR缓存管理器
class SSRCacheManager {
  constructor(options = {}) {
    this.cache = new Map();
    this.ttl = options.ttl || 300000; // 5分钟
    this.maxSize = options.maxSize || 100;
  }
  
  async get(key) {
    const item = this.cache.get(key);
    
    if (!item) {
      return null;
    }
    
    // 检查是否过期
    if (Date.now() - item.timestamp > this.ttl) {
      this.cache.delete(key);
      return null;
    }
    
    return item.data;
  }
  
  set(key, data) {
    // 检查缓存大小
    if (this.cache.size >= this.maxSize) {
      const firstKey = this.cache.keys().next().value;
      this.cache.delete(firstKey);
    }
    
    this.cache.set(key, {
      data,
      timestamp: Date.now()
    });
  }
  
  // 生成缓存键
  generateKey(route, params = {}) {
    const paramString = Object.keys(params)
      .sort()
      .map(key => `${key}=${params[key]}`)
      .join('&');
    
    return `${route}${paramString ? `?${paramString}` : ''}`;
  }
}

// 使用缓存优化SSR
const cacheManager = new SSRCacheManager({
  ttl: 300000, // 5分钟
  maxSize: 100
});

app.get('*', async (req, res) => {
  const cacheKey = cacheManager.generateKey(req.path, req.query);

  // 尝试从缓存获取
  const cachedHtml = await cacheManager.get(cacheKey);
  if (cachedHtml) {
    return res.send(cachedHtml);
  }
  
  // 渲染页面
  const html = await renderPage(req.path, req.query);
  
  // 缓存结果
  cacheManager.set(cacheKey, html);
  
  res.send(html);
});

3. 流式渲染​

流式渲染实现：

// 流式SSR实现
import { Readable } from 'stream';
import ReactDOMServer from 'react-dom/server';

class StreamRenderer {
  constructor() {
    this.template = this.getTemplate();
  }
  
  async renderToStream(component, data) {
    const stream = new Readable({
      read() {}
    });
    
    // 发送HTML头部
    stream.push(this.template.start(data));
    
    // 流式渲染组件
    const renderStream = ReactDOMServer.renderToPipeableStream(
      component,
      {
        onShellReady() {
          // 组件渲染完成
          stream.push(this.template.end());
          stream.push(null);
      },
      onError(error) {
          console.error('Stream render error:', error);
          stream.push(`<div>Error: ${error.message}</div>`);
          stream.push(this.template.end());
          stream.push(null);
        }
      }
    );
    
    // 管道连接
    renderStream.pipe(stream);
    
    return stream;
  }
  
  getTemplate() {
    return {
      start: (data) => `
        <!DOCTYPE html>
        <html>
        <head>
          <title>${data.title || 'SSR App'}</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
          <div id="app">
      `,
      end: () => `
          </div>
          <script>window.__INITIAL_DATA__ = ${JSON.stringify(data)}</script>
          <script src="/bundle.js"></script>
        </body>
        </html>
      `
    };
  }
}

// 使用流式渲染
app.get('*', async (req, res) => {
  const data = await fetchData(req.path);
  const component = <App data={data} />;
  
  const stream = await streamRenderer.renderToStream(component, data);
  stream.pipe(res);
});

最佳实践​

1. SSR最佳实践​

最佳实践原则：

2. 开发最佳实践​

开发规范：

  1. 代码组织

    • 分离服务端和客户端代码
    • 使用同构代码减少重复
    • 保持组件无状态化

  2. 性能优化

    • 实现页面和组件缓存
    • 使用代码分割减少包大小
    • 优化首屏加载时间

  3. 错误处理

    • 实现错误边界和降级处理
    • 监控SSR性能和错误
    • 提供友好的错误页面

  4. SEO优化

    • 管理页面元数据和结构化数据
    • 优化页面加载性能
    • 确保搜索引擎可索引

通过以上服务端渲染方案，可以构建出性能优秀、SEO友好、用户体验良好的现代Web应用。