SSR 服务端渲染概述

---

什么是服务端渲染

服务端渲染简称 SSR，全称是 Server Side Render，是指一种传统的渲染方式，就是在浏览器请求页面 URL 的时候，服务端将我们需要的 HTML 文本组装好，并返回给浏览器，这个 HTML 文本被浏览器解析之后，不需要经过 JavaScript 脚本的执行，即可直接构建出希望的 DOM 树并展示到页面中。

为什么需要 SSR ？

目前前端流行的框架大都是适用于构建 SPA（单页面应用程序），在 SPA 这个模型中，是通过动态地重写页面的部分与用户交互，而避免了过多的数据交换，响应速度自然相对更高。

但是，SPA 应用的首屏打开速度一般都很慢，因为用户首次加载需要先下载 SPA 框架及应用程序的代码，然后再渲染页面，并且 SPA 应用不利于 SEO 优化。

这时候，人们想着是不是可以将应用首页先加载出来，然后让首页用不到的其他 JS 文件再慢慢加载。但是由于 JS 引擎是单线程的，数据的组装过程会受到阻塞，单靠浏览器端的话不容易实现。

SSR 重新焕发活力的契机就在于此，如果将组装数据、渲染 HTML 页面的过程放在服务端，而浏览器端只负责显示接收到的 HTML 文件，那首屏的打开速度无疑会快很多。

SSR 的优缺点

那么，SSR 技术到底有哪些优点呢？我们来列举一下：

1. 更快的响应时间，相对于客户端渲染，服务端渲染在浏览器请求 URL 之后已经得到了一个带有数据的 HTML 文本，浏览器只需要解析 HTML，直接构建 DOM 树就可以。

2. 有利于 SEO ，可以将 SEO 的关键信息直接在后台就渲染成 HTML，而保证搜索引擎的爬虫都能爬取到关键数据，然后在别人使用搜索引擎搜索相关的内容时，你的网页排行能靠得更前，这样你的流量就有越高。

以上是 SSR 技术最主要的两大优点，虽有优势，但缺点也不容忽视：

1. 相对于仅仅需要提供静态文件的服务器，SSR 中使用的渲染程序自然会占用更多的 CPU 和内存资源。

2. 一些常用的浏览器 API 可能无法正常使用，比如window、docment和alert等，如果使用的话需要对运行的环境加以判断。

3. 开发调试会有一些麻烦，因为涉及了浏览器及服务器，对于 SPA 的一些组件的生命周期的管理会变得复杂。

4. 可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致。

总结

以上就是对 SSR 技术的一些简要介绍，总结一下就是：

1. SSR 提高 SPA 应用的首屏响应速度，有利于 SEO 优化。

2. SSR 最适用于静态展示页面，如果页面动态数据较多时需要谨慎使用。通过引入SSR技术，我们能够提升Web应用的性能、用户体验和可访问性，同时在搜索引擎排名方面也具备重要优势。随着前端技术的不断发展，SSR将继续发挥其关键作用，为Web应用带来更多创新和改进的可能性。