服务器端渲染
# 服务器端渲染
Server-Side Rendering 我们称其为 SSR,意为服务端渲染
是指在服务端完成页面的 html 拼接处理, 然后再发送给浏览器,将不具有交互能力的 html 结构绑定事件和状态,在客户端展示为具有完整交互能力的应用程序。
# 服务器端渲染优点
- 更好的 SEO
优势在于同步。搜索引擎爬虫是不会等待异步请求数据结束后再抓取信息的,如果 SEO 对应用程序至关重要,但你的页面又是异步请求数据,那 SSR 可以帮助你很好的解决这个问题。
- 更快的内容到达时间
优势在于慢网络和运行缓慢的设备场景。传统 SPA 需完整的 JS 下载完成才可执行,而 SSR 服务器渲染标记在服务端渲染 html 后即可显示,用户会更快的看到首屏渲染页面。如果首屏渲染时间转化率对应用程序至关重要,那可以使用 SSR 来优化。
# 不适合场景
以下三种场景 SSR 使用需要慎重:
- 同构资源的处理
劣势在于程序需要具有通用性。结合 Vue 的钩子来说,能在 SSR 中调用的生命周期只有 beforeCreate 和 created,这就导致在使用三方 API 时必须保证运行不报错。在三方库的引用时需要特殊处理使其支持服务端和客户端都可运行。
- 部署构建配置资源的支持
劣势在于运行环境单一。程序需处于 node.js server 运行环境。
- 服务器更多的缓存准备
劣势在于高流量场景需采用缓存策略。应用代码需在双端运行解析,cpu 性能消耗更大,负载均衡和多场景缓存处理比 SPA 做更多准备。
# 同构
同构指的就是 SSR(server-side rending 翻译过来就是服务器渲染)的一种,只是它强调服务端跟客户端公用一套代码。服务端去渲染,客户端来负责交互。当然服务端渲染挂了,客户端也是可以渲染的。
# 服务器端渲染应用
React 的(Next.js)
Vue 的(Nuxt.js)
Angular: Nest.js
# 服务器端渲染问题
# SSR 和 CSR 的区别
参考:服务端渲染 SSR 及实现原理 (opens new window) 彻底理解服务端渲染 - SSR 原理 (opens new window)