一、SSR核心原理剖析
1.1 服务端渲染工作流程
复制代码
1.2 CSR与SSR对比特性
| 特性 |
CSR模式 |
SSR模式 |
优势场景 |
| 首屏速度 |
依赖JS解析 |
直接渲染HTML |
内容优先页面 |
| SEO友好性 |
需预渲染 |
原生支持 |
门户资讯类站点 |
| CPU消耗 |
客户端计算 |
服务端计算 |
高性能服务器环境 |
| 数据安全 |
暴露API接口 |
服务端数据获取 |
敏感数据处理 |
| 技术复杂度 |
简单 |
复杂 |
核心业务场景 |
二、基础SSR架构实现
2.1 最小化SSR引擎实现
复制代码
// server/ssr-engine.tsimport { createSSRApp } from 'vue'import express from 'express'import { renderToString } from '@vue/server-renderer'const app = express()app.get('*', async (req, res) => { const vueApp = createSSRApp({ data: () => ({ url: req.url }), template: `<div>当前访问URL: {{ url }}</div>` }) const html = await renderToString(vueApp) const fullHTML = ` <!DOCTYPE html> <html> <head> <title>Vue3 SSR</title> </head> <body> <div id="app">${html}</div> <script src="/client.js"></script> </body> </html> ` res.status(200).setHeader('Content-Type', 'text/html').end(fullHTML)})// 客户端入口// client/entry-client.tsimport { createApp } from 'vue'const clientApp = createApp({ hydrate: true, mounted() { console.log('客户端Hydration完成') }})clientApp.mount('#app')
2.2 关键模块职责划分
| 模块 |
服务器端职责 |
客户端职责 |
共享代码 |
| 路由系统 |
匹配初始路由 |
接管后续导航 |
路由配置 |
| 数据预取 |
同步获取数据 |
客户端水合数据 |
API请求方法 |
| 状态管理 |
初始化存储状态 |
复用初始状态 |
Store定义 |
| 生命周期 |
执行serverHooks |
执行clientHooks |
通用业务逻辑 |
| 异常处理 |
捕获渲染错误 |
客户端错误上报 |
错误类型定义 |
三、企业级SSR优化策略
3.1 多级缓存架构
复制代码
// server/cache-strategy.tsimport NodeCache from 'node-cache'import { createLRUCache } from 'lru-cache'// 内存级缓存const memoryCache = new NodeCache({ stdTTL: 60, checkperiod: 120 })// 分布式缓存const redisCache = new Redis({ host: 'redis-cluster', ttl: 3600 })// LRU页面缓存const pageCache = createLRUCache({ max: 500, ttl: 1000 * 60 * 10 // 10分钟})export async function cacheMiddleware(req, res, next) { const cacheKey = generateCacheKey(req) // 1. 检查本地内存缓存 const memCached = memoryCache.get(cacheKey) if (memCached) return res.send(memCached) // 2. 检查Redis集群缓存 const redisCached = await redisCache.get(cacheKey) if (redisCached) { memoryCache.set(cacheKey, redisCached) return res.send(redisCached) } // 3. 执行渲染并缓存 const html = await renderPage(req) // 异步回写缓存 setImmediate(() => { memoryCache.set(cacheKey, html) redisCache.set(cacheKey, html) pageCache.set(cacheKey, html) }) res.send(html)}
3.2 性能优化矩阵
| 优化方向 |
解决方案 |
实施成本 |
收益预估 |
| 组件级缓存 |
缓存纯静态组件 |
中 |
30% TTFB↓ |
| 数据预取优化 |
并行请求+去重 |
高 |
40% LCP↓ |
| 流式渲染 |
renderToNodeStream |
低 |
15% FP↓ |
| 代码分割 |
路由级Split Chunks |
中 |
50% JS↓ |
| 编译时优化 |
Brotli压缩+Tree Shaking |
高 |
60% Size↓ |
四、混合渲染与增量静态生成
4.1 ISR架构实现
复制代码
// prerender.config.tsexport default { routes: [ { path: '/', revalidate: 60 }, // 每分钟重新生成 { path: '/product/[id]', revalidate: 3600 }, { path: '/profile', ssr: false } // 完全客户端渲染 ], // 动态路由生成 dynamicRoutes: async () => { const products = await fetchProductIds() return products.map(id => `/product/${id}`) }}// 渲染控制器export async function handleRequest(req, res) { if (isStaticRoute(req.url)) { return serveStatic(req, res) } if (isPrerendered(req.url)) { const html = await getPrerenderedPage(req.url) if (html) { refreshBackground(req.url) // 触发后台更新 return res.send(html) } } return handleSSR(req, res)}
4.2 渲染策略决策树
复制代码
五、容错与监控体系
5.1 全链路监控系统
复制代码
// server/monitor.tsimport { createMetrics } from 'prom-client'import Sentry from '@sentry/node'// 性能埋点const ssrDuration = new promClient.Histogram({ name: 'ssr_render_duration', help: 'SSR渲染耗时分布', buckets: [0.1, 0.5, 1, 2, 5]})// 错误捕获export function wrapSSR(handler) { return async (req, res) => { const end = ssrDuration.startTimer() try { await handler(req, res) end({ success: 'true' }) } catch (error) { end({ success: 'false' }) Sentry.captureException(error) res.status(500).send('渲染异常') } }}// 健康检查中间件app.use('/health', (req, res) => { res.json({ status: 'UP', heapUsed: process.memoryUsage().heapUsed / 1024 / 1024 + 'MB', uptime: process.uptime() })})
5.2 关键监控指标
| 指标类别 |
监控项 |
告警阈值 |
监控工具 |
| 服务可用性 |
500错误率 |
>0.5% |
Prometheus+Grafana |
| 性能指标 |
TTFB时间 |
>2000ms |
Lighthouse |
| 资源消耗 |
内存泄漏 |
每小时增长>100MB |
Node Clinic |
| 渲染质量 |
Hydration失败率 |
>1% |
Sentry |
| 缓存效率 |
缓存命中率 |
<85% |
Redis监控 |
六、云原生SSR部署实战
6.1 Kubernetes部署方案
复制代码
# ssr-deployment.yamlapiVersion: apps/v1kind: Deploymentmetadata: name: ssr-appspec: replicas: 6 strategy: rollingUpdate: maxSurge: 1 maxUnavailable: 0 selector: matchLabels: app: ssr-prod template: metadata: labels: app: ssr-prod spec: containers: - name: ssr-server image: my-registry/ssr-app:v1.8 ports: - containerPort: 3000 resources: limits: cpu: "2" memory: "2Gi" requests: cpu: "1" memory: "1Gi" envFrom: - configMapRef: name: ssr-env# HPA配置apiVersion: autoscaling/v2beta2kind: HorizontalPodAutoscalermetadata: name: ssr-hpaspec: scaleTargetRef: apiVersion: apps/v1 kind: Deployment name: ssr-app minReplicas: 3 maxReplicas: 20 metrics: - type: Resource resource: name: cpu target: type: Utilization averageUtilization: 70
🚀 高可用SSR架构原则
- 无状态服务：Session使用Redis集群存储
- 水平扩展：Pod支持快速弹性扩容
- 熔断机制：错误率超阈值自动降级
- 多可用区：跨AZ部署保障容灾
- 限流防护：Guava RateLimiter控制QPS
- 零停机更新：蓝绿部署结合健康检查