SSR 技术概述

前言

服务端渲染的概念这几年可以说是炒得火热，它不是一种新型的技术，而是互联网最开始时所使用的加载技术。

那么到底是什么原因，使得人们愿意拭去历史的尘埃，让服务端渲染这一古老的概念重新绽放光芒呢？

什么是服务端渲染？

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

SSR 有两种模式，单页面和非单页面模式，第一种是后端首次渲染的单页面应用，第二种是完全使用后端路由的后端模版渲染模式。他们区别在于使用后端路由的程度。

与之相对的是 CSR（Client Side Render），是一种目前流行的渲染方式，它依赖的是运行在客户端的 JS，用户首次发送请求只能得到小部分的指引性 HTML 代码。第二次请求将会请求更多包含 HTML 字符串的 JS 文件。

为什么需要 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 技术的一些简要介绍，总结一下就是：

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

• SSR 最适用于静态展示页面，如果页面动态数据较多时需要谨慎使用。

• 是否使用 SSR、使用到什么程度都需要开发者仔细权衡。

~

~本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！