{
    "version": "https://jsonfeed.org/version/1.1",
    "title": "SEO私馆",
    "home_page_url": "https://www.seosiguan.com/",
    "feed_url": "https://www.seosiguan.com/post/2407.json",
    "language": "zh-Hans",
    "items": [
        {
            "id": "https://www.seosiguan.com/post/2407.html",
            "url": "https://www.seosiguan.com/post/2407.html",
            "title": "网站优化服务端渲染(SSR)的技术方法",
            "content_html": "<p>网站优化SSR（服务端渲染）的核心，是在加快页面到达用户的速度与减轻服务器压力之间找平衡，同时优化页面的响应和加载的性能，以达到SEO、AEO、GEO的指标，但是每项都是技术层面的东西，而且不同框架和程序是有区别，所以还需针对性。</p><h2>后端缓存</h2><p>页面级缓存：把渲染好的完整HTML直接存到Redis或内存里，相同的请求直接返回缓存。比如用Cache-Control设置s-maxage=60，让CDN缓存60秒。</p><p>组件级缓存：对于页面上很少变化的部分（如：导航栏、页脚），把它们渲染结果缓存起来，而且只需要动态生成变化的数据区域，甚至Next.js中的unstable_cache或Nuxt的组件缓存都能做到。</p><p>数据查询缓存：在获取数据的函数上套一层缓存（如：lru-cache），避免每次请求都去查库。</p><h2>流式传输</h2><p>不用等整个页面都准备好才发送，而是先发头部和首屏内容，后面部分一边生成一边传，React 18的renderToPipeableStream、Vue的renderToStream都是现成的实现，能明显降低首字节时间（TTFB）。</p><p>服务端经常要调用多个API或查多次库，如果是串行等待，特别拖时间，做法：用Promise.all同时发起所有数据请求，等全部返回一次渲染；或者按“关键数据”和“次要数据”拆分，先取首屏必需的，其余用流式传输补上。</p><h2>优先渲染</h2><p>代码分割：动态导入（import()）非首屏组件，服务端仅渲染看得见的部分。</p><p>条件渲染：一些复杂的交互组件（图表、富文本编辑器）可以只在客户端加载，用&lt;ClientOnly&gt;包起来，服务端渲染一个占位符即可。</p><h3>静态生成代替实时渲染</h3><p>如果页面内容不是千人千面，直接用静态生成（SSG） 或在访问时生成一次然后缓存（ISR增量静态再生成）。Next.js的getStaticProps+revalidate就是一个典型例子，“首次访问触发渲染，后续直接给静态文件”。</p><h3>减轻服务端计算压力</h3><p>移除服务端不必要的重型模块：如果某个库只在客户端用，确保打包时不引入服务端。</p><p>把耗时同步计算交给Worker线程，或者拆成异步任务，避免阻塞事件循环。</p><p>使用轻量运行时或边缘函数（如：Cloudflare Workers、Vercel Edge）在离用户更近的地方渲染。</p><p><strong>结语：</strong>不要过度优化后端，保持适可而止、稳定为主，尤其是要深度的测试是否有错误，其实对于SEO方面就是要性能达标就可以了。</p>",
            "content_text": "网站优化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方面就是要性能达标就可以了。",
            "date_published": "2026-05-04T16:35:02+00:00",
            "date_modified": "2026-05-04T16:35:08+00:00",
            "summary": "网站优化SSR（服务端渲染）的核心，是在加快页面到达用户的速度与减轻服务器压力之间找平衡，同时优化页面的响应和加载的性能，以达到SEO、AEO、GEO的指标，但是每项都是技术层面的东西，而且不同框架和程序是有区别，所以还需针对性。后端缓存页面级缓存：把渲染好的完整HTML直接存到Redis或内存里，相同的请求直接返回缓存。比如用Cache-Control设置s-maxage=60，让CDN缓存60秒。组件级缓存：对于页面上很少变化的部分（如：导航栏、页脚），把它们渲染结果缓存起来，而且只需要动态生成变化的数据区域，甚至Next.js中的unstable_cache或Nuxt的组件缓存都能做到。"
        }
    ]
}