客户端渲染

      客户端（浏览器）                              服务器
           ↓
    浏览器地址栏输入URL                         
           ↓
    浏览器向服务器请求页面资源       →            服务器接收到请求
           ↓                                       ↓
    浏览器渲染接收到的页面内容       ←           返回（空的）HTML页面（应用节点空的)

    当读取到script标签时再次向服务器发送请求      →     服务器返回对应的js文件
                                                        ↓
                                    浏览器执行js中的代码，渲染页面
                                        ↓
            可能会发送ajax请求获取页面初始化时需要的数据     →   接受请求，返回数据
                                                              ↓
                                            获取到数据后，再次渲染                                                                                                                                                              

服务端渲染（Server Side Rendering）

是指将单页应用（SPA）在服务器端渲染成 HTML 片段，发送到浏览器，然后交由浏览器为其绑定状态与事件，成为完全可交互页面的过程。（PS：本文中的 SSR 内容都是围绕同构应用来讲的）

• 服务端只负责首次“渲染”（真正意义上，只有浏览器才能渲染页面，服务端其实是生成 HTML 内容），然后返回给客户端，客户端接管页面交互（事件绑定等逻辑），之后客户端路由切换时，直接通过 JS 代码来显示对应的内容，不再需要服务端渲染（只有页面刷新时会需要）

优点：

• 更快的首屏加载速度：无需等待 JavaScript 完成下载且执行才显示内容，更快速地看到完整渲染的页面，有更好的用户体验。 更友好的 SEO：

• 爬虫可以直接抓取渲染之后的页面，CSR 首次返回的 HTML 文档中，是空节点（root），不包含内容，爬虫就无法分析你的网站有什么内容，所以就无法给你好的排名。而 SSR 返回渲染之后的 HTML 片段，内容完整，所以能更好地被爬虫分析与索引。

• 基于旧版本的搜索引擎：我们会给 html 加 title 和 description 来做简单的 seo 优化，这两个本质上并不会提高搜索的排名，而是提高网站转化率。给网站提供更多的描述，让用户有点击的欲望，从而提高排名。

• 基于新版本的搜索引擎（全文搜索）：想要光靠上面两个来给网站有个好的排名是不行的，所以需要 SSR 来提供更多的网站内容。

缺点：

• 对服务器性能消耗较高
• 项目复杂度变高，出问题需要在前端、node、后端三者之间找
• 需要考虑 SSR 机器的运维、申请、扩容，增加了运维成本（可以通过 Serverless 解决）