后端渲染 java_nuxt 后端渲染的核心 并不一定是异步请求就是前端渲染 后端渲染在dom加载前绑定数据 核心原理代码...

Nuxt.js是vue官方推荐的一款优秀的服务端渲染(ssr)项目，集成了Vue，Vue-Router，Vuex，Vue-Meta等组件/框架，内置了webpack用于自动化构建，使我们可以更快速地搭建一个具有服务端渲染能力的应用。

今天主要来了解下Nuxt.js中一个非常重要的拓展功能：

asyncData(异步数据)的实现

1、asyncData有什么用？

在日常需求中可能想要在服务器端获取并渲染数据。那么使用asyncData方法可以使得你能够在渲染组件之前异步获取数据。asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。

在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用asyncData方法来获取数据并返回给当前组件。

2、为了更好的理解，首先先了解下ssr原理

如上图所示：webpack将 Source 打包出两个bundle文件：

其中 Server Bundle用于服务端渲染，服务端通过渲染器 bundleRenderer 将 bundle 生成首屏html片段；

而 Client Bundle 用于客户端渲染，首屏外的交互和数据处理还是需要浏览器执行 Client Bundle 来完成

我们的主角asyncData()就是在上图中Node Server中处理

3、创建渲染器

我们直接从打包之后说起，Nuxt renderer使用vue-server-renderer插件创建渲染器并解析webpack打好的bundle文件

const { createBundleRenderer } = require('vue-server-renderer’)

async ready() {

...

if (!this.options.dev) {

await this.loadResources()

}

...

}

//加载resource资源

async loadResources(_fs = fs) {

let distPath = path.resolve(this.options.buildDir, 'dist')

let updated = []

<