---
title: "网站优化服务端渲染(SSR)的技术方法"
url: "https://www.seosiguan.com/post/2407.html"
id: "https://www.seosiguan.com/post/2407.html"
language: "zh-Hans"
---

网站优化SSR（服务端渲染）的核心，是在加快页面到达用户的速度与减轻服务器压力之间找平衡，同时优化页面的响应和加载的性能，以达到SEO、AEO、GEO的指标，但是每项都是技术层面的东西，而且不同框架和程序是有区别，所以还需针对性。

## 后端缓存
页面级缓存：把渲染好的完整HTML直接存到Redis或内存里，相同的请求直接返回缓存。比如用Cache-Control设置s-maxage=60，让CDN缓存60秒。

组件级缓存：对于页面上很少变化的部分（如：导航栏、页脚），把它们渲染结果缓存起来，而且只需要动态生成变化的数据区域，甚至Next.js中的unstable_cache或Nuxt的组件缓存都能做到。

数据查询缓存：在获取数据的函数上套一层缓存（如：lru-cache），避免每次请求都去查库。

## 流式传输
不用等整个页面都准备好才发送，而是先发头部和首屏内容，后面部分一边生成一边传，React 18的renderToPipeableStream、Vue的renderToStream都是现成的实现，能明显降低首字节时间（TTFB）。

服务端经常要调用多个API或查多次库，如果是串行等待，特别拖时间，做法：用Promise.all同时发起所有数据请求，等全部返回一次渲染；或者按“关键数据”和“次要数据”拆分，先取首屏必需的，其余用流式传输补上。

## 优先渲染
代码分割：动态导入（import()）非首屏组件，服务端仅渲染看得见的部分。

条件渲染：一些复杂的交互组件（图表、富文本编辑器）可以只在客户端加载，用<ClientOnly>包起来，服务端渲染一个占位符即可。

### 静态生成代替实时渲染
如果页面内容不是千人千面，直接用静态生成（SSG） 或在访问时生成一次然后缓存（ISR增量静态再生成）。Next.js的getStaticProps+revalidate就是一个典型例子，“首次访问触发渲染，后续直接给静态文件”。

### 减轻服务端计算压力
移除服务端不必要的重型模块：如果某个库只在客户端用，确保打包时不引入服务端。

把耗时同步计算交给Worker线程，或者拆成异步任务，避免阻塞事件循环。

使用轻量运行时或边缘函数（如：Cloudflare Workers、Vercel Edge）在离用户更近的地方渲染。

**结语：**不要过度优化后端，保持适可而止、稳定为主，尤其是要深度的测试是否有错误，其实对于SEO方面就是要性能达标就可以了。