限流：保障 React SSR 平稳运行的关键

2024-01-22 04:57:27

React Server-Side Rendering (SSR) 将 React 组件渲染为 HTML，从而可以在页面加载时立即显示内容。但它也引入了服务端特有的一系列挑战，其中限流便是至关重要的。本文将通过一个实际案例阐述服务端限流的必要性，并介绍一种可行的限流算法。

服务端限流的必要性

考虑以下场景：一个热门网站使用 React SSR 渲染其主页。如果没有限流机制，当大量用户同时访问时，服务端可能会不堪重负，导致响应延迟甚至崩溃。这是因为服务端需要为每个请求执行昂贵的渲染过程，耗费大量资源。

限流算法示例

一种常见的限流算法是令牌桶算法。它模拟了一个桶，其中包含有限数量的令牌。每个请求都需要消耗一个令牌才能被处理。如果桶中没有足够的令牌，请求将被拒绝。

令牌桶算法的参数包括桶容量和填充率。桶容量限制了同时可处理的请求数，而填充率决定了桶中的令牌补充速度。

实现示例

// 令牌桶算法
class TokenBucket {
  private tokens: number;
  private capacity: number;
  private fillRate: number;

  constructor(capacity: number, fillRate: number) {
    this.capacity = capacity;
    this.fillRate = fillRate;
    this.tokens = this.capacity;
  }

  // 尝试获取令牌
  acquire(): boolean {
    if (this.tokens > 0) {
      this.tokens--;
      return true;
    }
    return false;
  }

  // 定时补充令牌
  setInterval() {
    setInterval(() => {
      this.tokens = Math.min(this.capacity, this.tokens + this.fillRate);
    }, 1000);
  }
}

// React SSR 应用
const ssrMiddleware = (req, res, next) => {
  const tokenBucket = new TokenBucket(10, 5); // 桶容量为 10，填充率为 5/秒

  // 限流处理
  if (tokenBucket.acquire()) {
    // 有足够的令牌，进行 SSR
    next();
  } else {
    // 没有足够的令牌，返回 429 Too Many Requests
    res.sendStatus(429);
  }
};