Vue组件服务器端渲染过程是怎样的一个复杂而精细的步骤？

本文共计2286个文字，预计阅读时间需要10分钟。

声明：需要读者对NodeJs、Vue及服务器端渲染有一定的了解。现在，前后端分离已成为前端开发的主流模式，大量前端应用都采用了这种架构。尤其是React，已成为大部分前端应用的首选框架。

声明：需要读者对 NodeJs、Vue 服务器端渲染有一定的了解

现在，前后端分离与客户端渲染已经成为前端开发的主流模式，绝大部分的前端应用都适合用这种方式来开发，又特别是 React、Vue 等组件技术的发展，更是使这种方式深入人心。

但有一些应用，客户端渲染就会遇到一些问题了：

• 需要做 SEO（搜索引擎优化），但客户端渲染的 html 中几乎没有可用的信息
• 需要首屏快速加载，但客户端渲染一般是长时间的加载动画或者白屏

如果能把客户端渲染的组件化技术（React、Vue 等）与传统的后端渲染的方式有效的结合起来，两者兼具，那就太完美了。

所以，这次就来聊聊 Vue 组件的服务器端渲染。

根据社区现有的一些方案，结合自己的实践，针对团队技术力量的不同，说说不同应用场景选择方案时的优先级。

1. NodeJs 渲染中间层

一般前后端的工作流是 后端 -> 前端。

传统的后端渲染模式是后端负责包括 url、接口、模板渲染等，前端与后端耦合在一起，当然这种方式正在慢慢的退出历史舞台。

主流的客户端渲染则是后端只提供接口（如有需要，可以提供必要的 url），前端与后端只通过接口交流数据，路由与渲染都在前端完成。