如果你已经使用 Vue.js 开发过前端应用，你一定知道它的优点：简单易用、高效优雅、自定义丰富、渐进式增强等。Vue.js 大部分应用是基于浏览器中的客户端渲染的，也就是通过 Vue.js 框架生成 HTML、CSS 和 JavaScript，然后由浏览器解析执行再展现出来的过程。但是客户端渲染也会有些问题：首屏渲染慢、SEO 不友好等等。为了解决这些问题，Vue.js 提供了服务端渲染（SSR）的支持。
什么是 Vue.js 服务端渲染？
服务端渲染（SSR）的核心思想是在服务端将 HTML、CSS 和 JavaScript 生成完整的 HTML 文件，然后将其返回给浏览器，但客户端会和服务端进行比较，只需要注入少量的 JavaScript 代码和 CSS 样式修改，即可变成一个完整的 SPA 应用。这样做的优点是可以极大的提高首屏渲染速度，同时提升了 SEO 的性能。
Vue.js 服务端渲染的原理
Vue.js 服务端渲染的原理是非常简单的，主要包括以下几个步骤：
- 服务端渲染需要一个 Node.js 的环境，因为 Node.js 可以在服务端执行 JavaScript 代码。
- 首先在服务端生成一个 Vue.js 实例，通过传入对应的数据渲染出对应的 HTML，也就是将数据和模版融合，生成 HTML 页面。
- 返回给浏览器的是 HTML 页面，而不是 JavaScript 代码，这样页面内容就能被搜索引擎爬虫获取。
- 在浏览器端通过 Vue.js 将
el元素和服务端生成的元素进行比较，当两边的节点是一致的时候，将服务端生成的 HTML 替换成 Vue.js 组件，最后变成 SPA 应用的形式。
可以将服务端渲染简单理解为一种组合了前后端的方案，类似于早期的经典 Web 开发方式，即将 HTML 和 PHP 结合生成完整的 HTML 页面，然后通过浏览器发送请求，传回给客户端展现。
如何实现 Vue.js 服务端渲染？
实现 Vue.js 服务端渲染其实并不复杂，可以按照以下几个步骤来完成：
- 首先需要安装
vue-server-renderer和express或者其他支持服务端渲染的框架。 - 在服务端入口文件中加载模版文件和数据，并实例化 Vue.js。
- 将组件渲染成 HTML 字符串，然后与模版文件进行拼接。
- 将拼接好的 HTML 字符串返回给客户端，由客户端 Vue.js 继续渲染 SPA 应用。
下面是一份基于 Express 的 SSR 模板，在使用之前需要把需要渲染的组件挂载到 Vue.js 实例中：
-- -------------------- ---- ------- ----- --- - -------------- ----- ------ - -------------------- ----- -------- - ----------------------------------------------- --------------- ----- ---- -- - ----- --- - --- ----- ----- - ---- ------- -- --------- ------------ ----------- -- ---------------------------- ----- ----- -- - -- ----- - ----------------------------- ------ ------- ------ - --------- --------- ----- ----- ---------- ------ ----- ---------------- --------------------- ------- -------------------- ------- -- -- -- -------------------展开代码
总结
Vue.js 服务端渲染是一种可以提升 Web 应用性能和 SEO 的极佳解决方案，只需要将 Vue.js 实例渲染到服务端，并将 HTML 页面返回给客户端，然后由客户端 Vue.js 继续渲染 SPA 应用即可。实现起来也非常简单，只需要对 Vue.js 的服务端渲染模块进行配置即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64692e07968c7c53b0933dff
