细说 Vue 组件的服务器端渲染

reclay 发布于2019-08-23 17:51 / 2642人阅读

摘要：所以，这次就来聊聊组件的服务器端渲染。这种模式下，后端只提供接口，传统的服务器端路由模板渲染则都有层接管。这样，前端开发人员可以自由的决定哪些组件需要在服务器端渲染，哪些组件可以放在客户端渲染，前后端完全解耦，但又保留了服务器端渲染的功能。

细说 Vue 组件的服务器端渲染

声明：需要读者对 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 的方式获取模板的数据，这样就算是在本地调试、开发，也不会报错）。

如果是复杂的 Json 数据或者其他复杂的模板数据（比如列表数据），则可以像下面这样接收：

这样，你就可以在组件里使用 window.globalData 的数据了，而不用另外用接口获取数据，达到加快首屏渲染的目的，而且本地开发、调试也不会报错。

如果你使用了本地数据 Mock 功能，也可以很容易的与这种方式结合在一起，只要稍加改造：

在代码中定义本地和服务器两个环境，本地环境使用 Mock 数据，服务器环境使用 window.globalData

可以使用 see-ajax, see-fetch 来简化这种方式的开发

此外，还有一些措施来进一步加快首屏渲染：

尽量减少首屏加载的脚本文件大小，其他脚本可以按需加载

如果需要，可以将 CSS、JS 内容注入到 HTML 中，这样就只会发起一个请求，也可以加快加载速度

2.2 SEO 优化

在上面加载首屏渲染的基础上，对于 SEO 优化也可以做相应的改造。

其实，在客户端渲染已慢慢成为主流开发模式的同时，搜索引擎也在跟进这种变化。

截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引，也就是说，即使是客户端渲染，但只要是同步数据渲染（非 Ajax 获取数据，比如模板数据），搜索引擎也能抓取到相应的 HTML 片段。

（国内的百度搜索与360搜索等暂时还没有跟进动态）

但为了兼容所有的搜索引擎，可以像下面改造：

先由后端模板引擎渲染一些 HTML 片段，仅给搜索引擎抓取，不作为给用户展示的页面

然后再由客户端渲染同步或异步的数据给用户展示真正的页面

3. 导出静态 html

如果页面没有动态数据，那就好办了，直接把组件导出为静态 html，然后由客户端激活。

具体过程可以参考官方文档。

这种方案比较好的是 nuxt.js generate 静态 HTML 文件。

目录结构：

- pages/                # 页面结构目录
  - index.vue 
  - second.vue
  - ... 
- nuxt.config.js        # 配置文件
- package.json

- dist                  # 导出静态 HTML 文件的默认目录

导出静态 HTML 文件

npx nuxt generate

如果一个项目里有多个 pages，可以这样构建：

目录结构：

- nuxt.config.js        # 配置文件
- package.json

- src/
  - home/               # home 页面 
    - pages/            # 页面结构目录
      - index.vue 
      - second.vue
      - ...
      
    - dist              # 导出静态 HTML 文件的默认目录
  - about/              # about 页面 
    - pages/            # 页面结构目录
      - index.vue 
      - second.vue
      - ...
      
    - dist              # 导出静态 HTML 文件的默认目录

导出静态 HTML 文件

npx nuxt generate src/home -c ../../nuxt.config.js    # home 页面
npx nuxt generate src/about -c ../../nuxt.config.js   # about 页面

除了上面提到的这些方式外，当然还有其他的方式，比如：

使用 Chrome Headless 模式获取组件的静态 HTML，参考 react-snap, puppeteer

官方 vue-server-renderer 导出静态 HTML

4. 总结

因为模式的改变，服务器端渲染与传统的后端模板渲染工作方式有很大的不同，所以在开发时需要与后端开发人员做好沟通，避免认知上的不同导致协作不协调。

后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

私有云 idc机房托管 vue组件 vue条件渲染 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104264.html

细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）

摘要：细说后端模板渲染客户端渲染中间层服务器端渲染前端与后端渲染方式的发展大致经历了这样几个阶段后端模板渲染客户端渲染中间层服务器端渲染。与后端模板渲染刚好相反，客户端渲染的页面渲染都是在客户端进行，后端不负责任何的渲染，只管数据交互。细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）前端与后端渲染方式的发展大致经历了这样几个阶段：后端模板渲染、客户端渲染、node ...

icyfire 2019-08-23 12:23 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

enali 2019-08-23 14:14 评论0 收藏0
VueJS 如何编译服务器端远程模板【异步组件+简单方法】

摘要：，常规组件，卒。小结总之呢，上面分析了在中编译远程模板的可能性，最后得出了两种方法异步组件，应该是官方的推荐方法动态组件，变通之法，论坛上发现的思路当然如果有其他方法欢迎交流，本文如果有不严谨不正确的地方也欢迎指出本文发自我的，原文链接我的说明有些时候你可能需要从后台获取模板，并在前台在自己编译，这在用 AngularJS 1.x 的时候似乎很常见，可以直接用 ng-include...

褰辩话 2019-08-01 17:30 评论0 收藏0
VueJS 如何编译服务器端远程模板【异步组件+简单方法】

摘要：，常规组件，卒。小结总之呢，上面分析了在中编译远程模板的可能性，最后得出了两种方法异步组件，应该是官方的推荐方法动态组件，变通之法，论坛上发现的思路当然如果有其他方法欢迎交流，本文如果有不严谨不正确的地方也欢迎指出本文发自我的，原文链接我的说明有些时候你可能需要从后台获取模板，并在前台在自己编译，这在用 AngularJS 1.x 的时候似乎很常见，可以直接用 ng-include...

2i18ns 2019-08-20 19:00 评论0 收藏0