Shulou(Shulou.com)06/03 Report--

Editor to share with you the Egg Vue SSR server rendering data request and asyncData example analysis, I hope you will learn something after reading this article, let's discuss it together!

Server rendering Node layer directly acquires data

In the Egg project, if you use the template engine specification, you can render the template through the render method. The first parameter of render is the template path, and the second parameter is the template rendering data. As shown in the following method:

Async index (ctx) {/ / get data from database, backend Http interface and other forms const list = ctx.service.article.getArtilceList (); / / render a pair of templates, where index.js is the JSBundle file await ctx.render ('index.js', {list}) built by Webpack from vue file;}

As can be seen from the above example, this is a very typical and easy-to-understand way of template rendering. In the actual business development, for regular page rendering, it is also recommended to use this way to obtain data, and then page rendering. After Node obtains the data, you can get the data obtained by Node through this.list in the root Vue file of Vue, and then you can bind the data in the vue template file.

There is a higher-level use here, you can directly pass Node objects such as ctx to the second parameter, and then you can get the ctx objects directly in the template. However, at this time, you need to deal with the hydrate problem caused by SSR rendering, because there is no ctx object in the front-end hydrate.

Async index (ctx) {/ / get data from database, backend Http interface, etc. Const list = ctx.service.article.getArtilceList (); / / render a pair of templates, where index.js is the JSBundle file await ctx.render ('index.js', {ctx, list}) built by Webpack from vue file;}

Get data by rendering asyncData on the server

In Vue single-page SSR, it involves the data request method, and the Node layer can continue to use the data acquisition method. But when the route is switched (the page is directly refreshed), the Node layer needs to obtain the data of different pages according to the route. At the same time, the front-end route switching should be considered. At this time, the Node layer route is not used, but the front-end route is carried out directly. At this time, the data request method should also be considered.

Based on the elegant problem of the above use, here is a way for asyncData to obtain data to solve the SSR problem of single-page SSR refresh. Node does not get the data directly, and the code for getting the data is written directly into the front-end code. Here are two problems that need to be solved:

The front end route matches the asyncData call

Here, we get the specified routing componet component according to the routing switching url, and then check whether there is an aysncData, and if so, call it. After the call, the data is put into the store of Vuex.

Return new Promise ((resolve, reject) = > {router.onReady (()) > {/ / url is the current request route, which can be passed to the front-end page const matchedComponents = router.getMatchedComponents (url) through the server; if (! matchedComponents) {return reject ({code: '404'}) } return Promise.all (matchedComponents.map (component = > {/ / key code if (component.methods & & component.methods.asyncData) {return component.methods.asyncData (store);} return null;}) .then (() = > {context.state = {... store.state,... context.state}) Return resolve (new Vue (options));});})

Vue template defines asyncData method

The front end manages the data through Vuex, and puts the data into store. The front end can get the data through this.$store.state, and both Node and front end can get it.

Export default {computed: {isLoading () {return false;}, articleList () {return this.$store.state.articleList;}}, methods: {asyncData ({state, dispatch, commit}) {return dispatch ('FETCH_ARTICLE_LIST')}

Unified call of front-end asyncData data

When the server asyncData is called, the problem of single page SSR refresh can be solved. If the server route is not taken when switching routes at the front end, how to deal with the data?

When implementing a single page in Vue, Vue-Router is usually used. At this time, you can use Vue-Router to provide afterEach hooks for unified data requests, and you can directly call the asyncData method defined by the Vue template. The code is as follows:

Const options = this.create (window.__INITIAL_STATE__); const {router, store} = options;router.beforeEach ((route, redirec, next) = > {next ();}); router.afterEach ((route, redirec) = > {if (route.matched & & route.matched.length) {const asyncData = route.matched [0] .principents.default.asyncData; if (asyncData) {asyncData (store);}))

Finally, paste the complete code that can be used. Please modify it according to your actual needs. For practical examples, please see https://github.com/easy-team/egg-vue-webpack-boilerplate/tree/feature/green/spa.

Vue page initialization unified encapsulation

Import Vue from 'vue';import {sync} from' vuex-router-sync';import'. / vue/filter';import'. / vue/directive';export default class App {constructor (config) {this.config = config;} bootstrap () {if (EASY_ENV_IS_NODE) {return this.server ();} return this.client ();} create (initState) {const {index, options, createStore, createRouter} = this.config; const store = createStore (initState) Const router = createRouter (); sync (store, router); return {... index,... options, router, store};} client () {Vue.prototype.$http = require ('axios'); const options = this.create (window.__INITIAL_STATE__); const {router, store} = options; router.beforeEach ((route, redirec, next) = > {next ();}) Router.afterEach ((route, redirec) = > {console.log ('> > afterEach', route); if (route.matched & & route.matched.length) {const asyncData = route.matched [0] .implements.default.asyncData; if (asyncData) {asyncData (store);}); const app = new Vue (options); const root = document.getElementById ('app'); const hydrate = root.childNodes.length > 0; app.$mount (' # app', hydrate) Return app;} server () {return context = > {const options = this.create (context.state); const {store, router} = options; router.push (context.state.url); return new Promise ((resolve, reject) = > {router.onReady () = > {const matchedComponents = router.getMatchedComponents (); if (! matchedComponents) {return reject ({code: '404'}) } return Promise.all (matchedComponents.map (component = > {if (component.asyncData) {return component.asyncData (store);} return null;}) .then (() = > {context.state = {... store.state,... context.state}; return resolve (new Vue (options));});}) });}

Page entry code

/ / index.js'use strict';import App from 'framework/app.js';import index from'. / index.vue';import createStore from'. / store';import createRouter from'. / router';const options = {base:'/'}; export default new App ({index, options, createStore, createRouter,}) .bootstrap ()

Front-end router / store definition

/ / store/index.js'use strict';import Vue from 'vue';import Vuex from' vuex';import actions from'. / actions';import getters from'. / getters';import mutations from'. / mutations';Vue.use (Vuex); export default function createStore (initState = {}) {const state = {articleList: [], article: {},... initState}; return new Vuex.Store ({state, actions, getters, mutations});} / / router/index.jsimport Vue from 'vue' Import VueRouter from 'vue-router';import ListView from'. / list';Vue.use (VueRouter) Export default function createRouter () {return new VueRouter ({mode: 'history', base:' /', routes: [{path:'/', component: ListView}, {path:'/ list', component: ListView}, {path:'/ detail/:id', component: () = > import ('. / detail')}]}) } after reading this article, I believe you have some understanding of "Egg Vue SSR server rendering data request and sample analysis of asyncData". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.