服务端渲染

理解：

爬虫爬取 HTML 文件时不会帮我们去执行 JS 文件，所以动态和异步的数据都是无法被 SEO 搜索到，另外，我们在首屏需要等待 JS 加载完毕，并执行，通过 SSR，这些环节都在服务端完成了，在前端直接渲染 HTML 即可，优化了 js 执行和等待的时间，另外得到了静态页面

实现原理：

1. 读取模板，解析 DOM 节点，返回 HTML 结构
2. 创建路由（单例模式），通过路由的 url 获取渲染模板
3. 创建 Store，约定异步获取数据进行预请求
4. 非首屏获取异步数据：使用 Vue.mixins 将数据放入 beforeMount 中获取（因为 node 端没有 beforeMount 和 Mount 钩子）
5. 进行打包

优点：

• 提升 SEO
• 提高首屏渲染速度
• 可以生成缓存片段，生成静态化文件、节能

缺点：

• 加重了服务器的消耗

1. 使用缓存：node server nginx
2. 降级：cpu、内存 SPA
3. 同构：提高代码复用，保持 SPA 的强交互性，又能保证 SEO

• 复杂度高
• 不容易维护，通常前端改了部分 html 或者 css，后端也需要修改。

使用场景：

1. 首屏渲染速度过慢
2. 需要 SEO 搜索排名
3. 移动端低网速情况
4. 老项目判断爬虫，直接返回静态页面，不影响原页面又提高了 SEO
5. 新项目直接使用 next 和 Nuxt 框架

服务端组件

译：关于 React 服务器组件的 5 个误解 – 云谦的博客