声明：需要读者对 NodeJs、Vue 服务器端渲染有一定的了解
现在，前后端分离与客户端渲染已经成为前端开发的主流模式，绝大部分的前端应用都适合用这种方式来开发，又特别是 React、Vue 等组件技术的发展，更是使这种方式深入人心。
但有一些应用，客户端渲染就会遇到一些问题了：
需要做 SEO（搜索引擎优化），但客户端渲染的 html 中几乎没有可用的信息
需要首屏快速加载，但客户端渲染一般是长时间的加载动画或者白屏
如果能把客户端渲染的组件化技术（React、Vue 等）与传统的后端渲染的方式有效的结合起来，两者兼具，那就太完美了。
所以，这次就来聊聊 Vue 组件的服务器端渲染。
根据社区现有的一些方案，结合自己的实践，针对团队技术力量的不同，说说不同应用场景选择方案时的优先级。
1. NodeJs 渲染中间层
一般前后端的工作流是 后端 -> 前端。
传统的后端渲染模式是后端负责包括 url、接口、模板渲染等，前端与后端耦合在一起，当然这种方式正在慢慢的退出历史舞台。
主流的客户端渲染则是后端只提供接口（如有需要，可以提供必要的 url），前端与后端只通过接口交流数据，路由与渲染都在前端完成。
而 NodeJs 渲染中间层的工作流则是 后端 -> NodeJs -> 前端（NodeJs 渲染中间层由前端开发人员掌握）。
这种模式下，后端只提供接口，传统的服务器端路由（url）、模板渲染则都有 NodeJs 层接管。这样，前端开发人员可以自由的决定哪些组件需要在服务器端渲染，哪些组件可以放在客户端渲染，前后端完全解耦，但又保留了服务器端渲染的功能。
这种方案最成熟的是nuxt.js。
如果有需要，大家可以自己去 nuxt.js 官方文档 看看具体的使用方法和详细的功能。
应该说，这种方式是目前最完美的一种方案，但也有一些隐患：
增加了一个 NodeJs 中间层，应用性能会有所降低
增加了架构的复杂度、不稳定性，也降低了应用的安全性
对于高并发应用，NodeJs 层会很容易形成瓶颈
对开发人员要求高了很多
所以，这种方式适合对并发量、安全性、稳定性等要求不高，但又需要做 SEO 或首屏快速加载的页面。
当然，如果你能够自己改造相关的工具，就另当别论了。
2. 保留后端模板渲染
当不能使用 NodeJs 中间层时，而又要达到 SEO 与首屏快速响应的目的时，在传统的后端模板渲染的基础上，就需要对前端的页面加以适当的改造。
2.1 首屏快速响应
首屏快速响应就意味着首屏渲染所需的数据是跟 HTML 文件一起到达浏览器的，这些数据当前是由后端模板引擎嵌入到 HTML 页面中的。
以 Java 的 freemarker 模板引擎为例：
（html 中以 script 的方式获取模板的数据，这样就算是在本地调试、开发，也不会报错）。
<script> window.globalData = { stringValue: '${stringValueTplName}', intValue: parseInt('${intValueTplName}', 10), }; </script>
如果是复杂的 Json 数据或者其他复杂的模板数据（比如列表数据），则可以像下面这样接收：
<script type="text/tpl"> window.tmpData = { jsonValue: ${jsonValueTplName}, }; </script> <script> try { eval(document.getElementById('tpl-script-json').innerText); } catch (e) { window.tmpData = { jsonValue: {} }; } window.globalData = { jsonValue: window.tmpData.jsonValue, }; </script>
这样，你就可以在组件里使用 window.globalData 的数据了，而不用另外用接口获取数据，达到加快首屏渲染的目的，而且本地开发、调试也不会报错。
如果你使用了本地数据 Mock 功能，也可以很容易的与这种方式结合在一起，只要稍加改造：
在代码中定义本地和服务器两个环境，本地环境使用 Mock 数据，服务器环境使用 window.globalData
可以使用see-ajax, see-fetch 来简化这种方式的开发
此外，还有一些措施来进一步加快首屏渲染：
尽量减少首屏加载的脚本文件大小，其他脚本可以按需加载
如果需要，可以将 CSS、JS 内容注入到 HTML 中，这样就只会发起一个请求，也可以加快加载速度
2.2 SEO 优化
在上面加载首屏渲染的基础上，对于 SEO 优化也可以做相应的改造。
其实，在客户端渲染已慢慢成为主流开发模式的同时，搜索引擎也在跟进这种变化。