优化 SSR（Server-Side Rendering）性能需要从代码、架构、基础设施多维度入手，以下是一些关键优化策略：

一、缓存优化

1. 页面级缓存

   • 对静态或低频更新页面（如首页、商品详情页）缓存生成的 HTML，直接复用。
   • 使用 Redis 或内存缓存，设置合理的过期时间（如 10 分钟）。
   • 示例（Next.js）：通过 Cache-Control 头或中间件实现。

2. 组件级缓存

   • Vue/Nuxt：通过 serverCacheKey 缓存组件。
   • React/Next：使用第三方库（如 react-ssr-optimization）缓存渲染结果。

二、代码优化

1. 避免客户端代码在服务端执行

   • 隔离浏览器 API（如 window、document），通过 typeof window === 'undefined' 判断环境。
   • 动态导入客户端专用模块（如 useEffect 中的逻辑）。

2. 减少重复渲染

   • 使用 React.memo 或 Vue 的 v-once 避免组件重复渲染。
   • 优化数据依赖（避免不必要的数据请求）。

3. 流式渲染（Streaming）

   • 分块传输 HTML，优先输出静态部分，动态内容异步填充。
   • Next.js：通过 getServerSideProps + Streaming 实现。

三、数据请求优化

1. 并行数据请求

   • 使用 Promise.all 或并发加载接口，减少请求瀑布流。
   • 示例：const [user, posts] = await Promise.all([fetchUser(), fetchPosts()])

2. 数据预取与复用

   • 预取关键数据并注入 HTML，客户端不再重复请求（通过 window.__INITIAL_STATE__ 传递）。
   • 使用 SWR 或 React Query 客户端缓存。

四、依赖与构建优化

1. 减小 Bundle 体积

   • 通过 Tree-shaking 移除未使用代码。
   • 按需加载第三方库（如 lodash-es 替代 lodash）。

2. 隔离服务端依赖

   • 确保 SSR 打包时仅包含必要依赖（如避免打包 react-dom/client 到服务端）。

五、基础设施优化

1. 启用 CDN 边缘缓存

   • 对静态资源（CSS/JS/图片）使用 CDN 加速。
   • 结合 SSR 动态内容（如 Cloudflare Workers 边缘渲染）。

2. 横向扩展服务器

   • 使用负载均衡（如 Nginx）分摊请求压力。
   • 无服务化部署（如 Vercel、AWS Lambda），按需扩缩容。

六、监控与降级

1. 性能监控

   • 使用 APM 工具（如 New Relic）监控 SSR 耗时。
   • 统计 TTFB（Time to First Byte）和 FCP（First Contentful Paint）。

2. 降级策略

   • 当 SSR 超时或失败时，降级为 CSR（客户端渲染）或返回骨架屏。

七、框架最佳实践

• Next.js：启用 swc 编译、增量静态生成（ISR）、动态导入组件。
• Nuxt.js：使用 lazyHydration 延迟水合、启用 http2 推送。

示例：Next.js 流式渲染

// 启用流式渲染
import { Suspense } from 'react';
import { renderToPipeableStream } from 'react-dom/server';

app.get('/page', (req, res) => {
  const stream = renderToPipeableStream(
    <Suspense fallback={<div>Loading...</div>}>
      <App />
    </Suspense>
  );
  stream.pipe(res);
});

通过上述策略，可显著降低服务器负载，提升首屏速度和并发处理能力。