Frontend - SSR

[tomoya06]

SSR

概述

一般情况下，一个web页面的数据渲染完全由客户端或者浏览器端来完成。先从服务器请求，然后到页面；再通过AJAX请求到页面数据并把相应的数据填充到模板，形成完整的页面来呈现给用户。

而服务端渲染（Server-Side Rendering, SSR）则是，把数据的初始请求放在了服务端，服务端收到请求后，把数据填充到模板形成完整的页面，由服务端把渲染的完整的页面返回给客户端。这样减少了一次客户端到服务端的HTTP请求，加快了相应速度，一般用于首屏的性能优化。

比较

与传统 SPA (单页应用程序 (Single-Page Application)) 相比，服务器端渲染 (SSR) 的优势主要在于：

• 更好的 SEO，因为搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
• 用户将会更快速地看到完整渲染的页面。

使用服务器端渲染 (SSR) 时还需要有一些权衡之处。以Vue为例：

• 开发条件所限。例如：生命周期钩子函数在编译后的html中不会再执行；window/document对象在Node.js环境中无法访问会导致报错；一些外部扩展库可能需要特殊处理，才能在服务器渲染应用程序中运行。
• 涉及构建设置和部署的更多要求。服务器渲染应用程序，需要处于 Node.js server 运行环境。
• 更多的服务器端负载。在 Node.js 中渲染完整的应用程序，会比仅仅提供静态文件的 server 更加大量占用 CPU 资源。

如果无需动态编译HTML，还可以考虑预渲染方案。

[tomoya06]

实战

使用Nuxt.js可以完成vue cli项目的迁移。参考官方文档。迁移的todo demo参考这里。

可以看到生成的静态文件中，html文件已经包含了完整的DOM。下图，vscode左为SSR build，右为CSR build，Chrome展示了实际页面。