一、SSR的概念和定义

SSR（Server Side Rendering），翻译为服务器端渲染，是指在服务端执行组件或页面的渲染，将渲染后的 HTML、CSS 和 JavaScript 代码以字符串的形式返回给浏览器，浏览器只需要将字符串转换成 DOM 后，即可在客户端显示出静态页面。

相对于传统的 SPA（Single Page Application）开发模式中，由浏览器在客户端完成页面渲染过程，SSR 能够提高首屏加载速度，有利于 SEO（Search Engine Optimization），改善用户体验。

而且在 SSR 中，由于服务端已经生成了完整的 HTML 文档，所以对于搜索引擎蜘蛛而言，可以快速地获取到需要展示的内容，并有利于网站的 SEO。

二、SSR的优缺点

1、优点：

1）搜索引擎友好：传统的浏览器端渲染方式很难实现 SEO（Search Engine Optimization）。由于搜索引擎爬虫需要收集 HTML 文件，作为评估排名的参考，而 SSR 生成的 HTML 文件对搜索引擎爬虫来说就是简单易读的 HTML，有利于 SEO 的优化。


// Express 实现 SSR 代码示例
app.get('/', (req, res) => {
  const content = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={context}>
        <App />
      </StaticRouter>
    </Provider>
  );
  const html = `
    <html>
      <head>
        <title>Hello, SSR</title>
        <script src="/index.js"></script>
      </head>
      <body>
        <div id="root">${content}</div>
      </body>
    </html>
  `;
  res.send(html);
});

2) 首屏渲染快：当用户请求网站时，服务端可以返回一个经过渲染的 HTML 文件，而不仅仅是空的 index.html，这样用户在进入页面时，可以很快地看到页面的具体内容和图片。

3）降低资源浪费：在传统的浏览器端渲染中，前端渲染 JS 后，到最后通过 DOM 更新页面的时候，浏览器的大量计算资源浪费在了页面元素更新的细节上。而在 SSR 中，前端可以完全专注于只需通过 API 请求，减少服务器请求，减少了服务器的计算负担和网络开支，同时提升了前端的执行效率。

2、缺点：

1）服务器开销大：SSR 的特点在于服务端渲染页面，因此在模块、组件、页面等上下文的切换时，需要编译、渲染等多个过程。这样服务器开销就随着组件页面增加而不断增大，如不采取一定的优化措施，可能会大大降低服务器的性能。

2）前后端代码耦合：由于前后端需要共用代码，造成了一定的代码耦合度，所以，在开发阶段，会降低一定的开发速度和代码的质量。

3）交互与动效性能问题：由于每次改变状态都可能需要通信，所以 SSR 的交互与动效体验上会比 SPA 稍微逊色。虽然可以通过前后端协助和优化，来完善这一领域的相关技术能力，但改善难度较大。

三、SSR与CSR的区别

CSR（Client Side Rendering），翻译为客户端渲染，是指在浏览器端执行组件或页面的渲染，由 JavaScript 读取数据作为模板，在客户端执行 DOM 操作完成页面的渲染。

与 SSR 不同的是，CSR 不需要服务端渲染页面，只需要浏览器将渲染后的代码和资源自动读入缓存中，在执行时，从缓存读取就可以了，从而减轻了服务器压力和减少了前后端通信量。

而且，CSR 比起 SSR 来讲，交互和动效体验要更好，但页面加载速度相对会慢一些，对于搜索引擎来说也不太友好，常见的 CSR 框架有 React、Vue 等。

四、SSR实战应用场景

1）电子商务领域：页面 SEO 的优化对于电子商务网站是至关重要的。因此对于电商网站来说，SSR 是很好的应用场景。

2）对客户端要求较高，但又要 SEO 的网站：既想在用户体验上给用户以良好观感，又想在 SEO 上有优化效果。

3）新闻、资讯类等 Web 门户网站：内容极为丰富的页面，首屏秒开并能被搜索引擎准确爬取也是用户使用频率的关键。

4）生产力工具类应用：生产力工具往往会有较多的第三方操作，传统 CSR 的架构可能会对服务端造成过载，而采用 SSR 可以减少网络请求，缓解服务器瓶颈。

五、总结

SSR 是建立在 CSR 的基础上的一个有效补充，在用户体验、SEO、服务器压力等方面有很多优势。虽然也存在缺点，但是在适当的场景使用下，能够取得比较好的效果，帮助网站 SEO、降低服务器开销、提高用户体验。因此，对于电子商务、新闻咨询等等需要支持 SEO 以及对客户端速度要求较高的场景，SSR 的应用比较理想。