SSR 错误处理与降级

SSR 渲染可能失败，需实现降级机制保证页面可用。

SSR 错误类型

错误	原因
渲染超时	数据预取耗时过长
内存溢出	大量并发渲染
API 错误	数据预取失败
组件错误	渲染过程异常

错误处理流程

JavaScript

SSR 请求 → 尝试渲染 → 失败？ → 降级 CSR → 返回空壳页面
                      ↓ 成功
                    返回完整 HTML

基本降级实现

HTML

async function handleRequest(url) {
  try {
    // 尝试 SSR 渲染
    const html = await renderSSR(url)
    return html
  } catch (error) {
    console.error('SSR failed:', error)

    // 降级到 CSR
    return renderCSR(url)
  }
}

注意：降级 CSR 返回空壳 HTML，客户端动态渲染。

CSR 降级页面

JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Loading...</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/entry-client.js"></script>
</body>
</html>

超时降级

vue

async function renderWithTimeout(url, timeout = 3000) {
  const renderPromise = renderSSR(url)
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('SSR timeout')), timeout)
  )

  try {
    return await Promise.race([renderPromise, timeoutPromise])
  } catch (error) {
    // 超时降级 CSR
    return renderCSR(url)
  }
}

错误边界处理

JavaScript

<script setup>
import { onErrorCaptured } from 'vue'

// 捕获渲染错误
onErrorCaptured((error) => {
  console.error('Render error:', error)
  // 显示错误页面
  return false  // 阻止错误传播
})
</script>

API 错误降级

JavaScript

async function fetchData() {
  try {
    return await fetchAPI()
  } catch (error) {
    // API 失败，返回默认数据
    return getDefaultData()
  }
}

降级策略对比

策略	适用场景
完全降级	渲染彻底失败
部分降级	部分组件失败
数据降级	API 数据失败
超时降级	渲染耗时过长

监控与告警

text

// SSR 失败记录
function reportSSRFailure(error, url) {
  // 上报错误信息
  console.error('SSR failure:', { error, url, timestamp: Date.now() })
}

要点总结

SSR 失败时降级到 CSR
超时使用 Promise.race 控制
API 错误返回默认数据
错误边界捕获渲染异常

📝 发现内容有误？点击此处直接编辑