详细说明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 window . global data={ stringvalue : ' $ { stringValueTplName } '，int value : parseInt(' $ { intValueTplName } '，10)，}；/script如果是复杂的Json数据或者其他复杂的模板数据(比如列表数据)，可以接收如下：

脚本类型=' text/TPL ' id=' TPL-script-JSON ' window . tmpdata={ jsonvalue : $ { jsonvalueetplname }，}；/scriptscript尝试{ eval(document . getelementbyid(' TPL-script-JSON ')。innerText)；} catch(e){ window . tmpdata={ jsonvalue : } }；} window . global data={ jsonvalue : window . tmpdata . jsonvalue，}；/script通过这种方式，可以在组件中使用window.globalData的数据，而不是使用另一个接口来获取数据，这样可以加快第一个屏幕的渲染速度，而且本地开发调试也不会报错。

如果您使用本地数据Mock函数，它可以很容易地与该方法结合，只需稍加修改：

代码中定义了两种环境，本地和服务器。本地环境使用Mock数据，服务器环境使用window.globalData. See-Ajax和See-fetch可以用来简化这种模式的开发。此外，还有一些措施可以进一步加快首屏渲染速度：

尽量减少第一屏加载的脚本文件大小，其他脚本可以按需加载。如果需要，可以将CSS和JS内容注入到HTML中，这样就可以只发起一个请求，加快加载速度。2.2 SEO优化

在加载上面第一个屏幕渲染的基础上，SEO优化也可以进行相应的修改。

事实上，在客户端渲染逐渐成为主流发展模式的同时，搜索引擎也在跟随这一变化。

到目前为止，谷歌和Bing都能很好地索引同步JavaScript应用，也就是说，即使是客户端渲染，只要是同步数据渲染(非Ajax数据，比如模板数据)，搜索引擎也能抓取到相应的HTML片段。

(国内百度搜索和360搜索尚未跟进)

但是为了与所有搜索引擎兼容，可以对其进行如下修改：

首先，后端模板引擎渲染一些HTML片段，这些片段只被搜索引擎抓取，不作为页面供用户展示

然后，客户端呈现同步或异步数据，向用户显示真实的页面

div！-后端模板引擎渲染和搜索引擎抓取的剪辑放在这里，用户不可见-/div script//接收同步数据窗口. global data={ string value 3360 ' $ { string value tplname } '，int value 3360 parseint(' $ { intvaluetplname } '，10)，}；/script3。导出静态html

如果页面上没有动态数据，很容易将组件直接导出为静态html，然后由客户端激活。

具体流程可以参考官方文件。

更好的解决方案是nuxt.js生成静态HTML文件。

目录结构：

-pages/#页面结构目录-index.vue-second.vue-.-nuxt.config.js #配置文件-package.json- dist #导出静态HTML文件的默认目录。

Npx nuxt生成如果一个项目中有多个页面，可以按如下方式构建：

目录结构：

-nuxt.config.js #配置文件-package.json- src/-home/#主页-pages/#页面结构目录-index.vue-second.vue-.-dist #导出静态HTML文件的默认目录-关于/#关于页面-页面/#页面结构目录-index.vue-second.vue-.-dist #导出静态HTML文件的默认目录

除了上述方式，还有其他方式，如：npx nuxt生成src/home-c././nuxt.config.js #主页npx nuxt生成src/about-c././nuxt.config.js #关于页面：

使用Chrome无头模式获取组件的静态HTML，参考反应快照，木偶

官方的虚拟服务器渲染器输出静态的HTML

4.摘要

由于模式的改变，服务器端渲染与传统的后端模板渲染有很大的不同，因此在开发过程中需要与后端开发人员做好沟通，避免因认知差异导致协作不协调。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。