Vue组件服务器端渲染具体步骤详解是怎样的？

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

声明：需要读者对NodeJs、Vue+服务器端渲染有一定的了解。目前，前后端分离已成为前端开发的主流模式，大量前端应用都采用这种方式进行开发。特别是React，几乎成为绝大多数前端应用的标配。

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

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

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

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

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

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

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

1. NodeJs 渲染中间层

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

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

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

而 NodeJs 渲染中间层的工作流则是 后端 -> NodeJs -> 前端（NodeJs 渲染中间层由前端开发人员掌握）。

这种模式下，后端只提供接口，传统的服务器端路由（url）、模板渲染则都有 NodeJs 层接管。