服务端渲染相关概念
总览
SPA与SSR概念以及优缺点、同构应用、Hydration
# SPA
SPA Single-Page Application 单页面应用
在Web应用程序中通过动态加载不需要从服务器重新加载整个页面的方式来呈现内容。SPA采用前端路由的方式，通过URL的变化来驱动页面的切换和渲染。
# SSR
SSR Server-Side Rendering 服务端渲染
在服务端完成页面的html 拼接处理， 然后再发送给浏览器，将不具有交互能力的html结构绑定事件和状态，在客户端展示为具有完整交互能力的应用程序
# 两者对比
SEO优化
浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息
首屏渲染 首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。
以下场景 SSR 使用需要慎重
- 同构资源的处理 劣势在于程序需要具有通用性。结合 Vue 的钩子来说，能在 SSR 中调用的生命周期只有 beforeCreate 和 created，这就导致在使用三方 API 时必须保证运行不报错。在三方库的引用时需要特殊处理使其支持服务端和客户端都可运行。
- 部署构建配置资源的支持 劣势在于运行环境单一。程序需处于 node.js server 运行环境。
- 服务器更多的缓存准备 劣势在于高流量场景需采用缓存策略。应用代码需在双端运行解析，cpu 性能消耗更大，负载均衡和多场景缓存处理比 SPA 做更多准备
# SSR同构应用
一个既可以在服务端运行也可以在客户端运行的应用
当用户发出请求时，先在服务器通过SSR渲染出首页的内容。但是对应的代码同样可以在客户端被执行。 执行的目的包括事件绑定等以及其他页面切换时也可以在客户端被渲染;
# Hydration
Hydration 是将服务器端渲染的 HTML 结构转换为客户端可操作的页面的过程。当服务器端渲染的 HTML 页面被传递到客户端后，客户端会通过 JavaScript 将静态 HTML 页面转换为可交互的网页。这个过程涉及到将 HTML 结构与客户端代码进行绑定，以保持与服务器端渲染相同的状态。这个过程就是 Hydration。换句话说，Hydration 是在客户端完成的一种前端渲染技术，用于将服务器端渲染的 HTML 页面变成可以与用户交互的页面
