Detailed explanation of Vue's SSR server-side rendering example

"client:build": "webpack --config scripts/webpack.client.js --watch",
"server:build": "webpack --config scripts/webpack.server.js --watch",

"run:all": "concurrently \"npm run client:build\" \"npm run server:build\""

{
  "name": "11.vue-ssr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "client:dev": "webpack serve --config scripts/webpack.client.js",
    "client:build": "webpack --config scripts/webpack.client.js --watch",
    "server:build": "webpack --config scripts/webpack.server.js --watch",
    "run:all": "concurrently \"npm run client:build\" \"npm run server:build\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^5.3.0",
    "koa": "^2.13.1",
    "koa-router": "^10.0.0",
    "koa-static": "^5.0.0",
    "vue": "^2.6.12",
    "vue-router": "^3.4.9",
    "vue-server-renderer": "^2.6.12",
    "vuex": "^3.6.0",
    "webpack-merge": "^5.7.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.13.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  }
}

// The entry file packaged by webpack needs to export the configuration // webpack webpack-cli
// @babel/core babel's core module // babel-loader is a bridge between webpack and babel // @babel/preset-env converts es6+ into low-level syntax // vue-loader vue-template-compiler parses .vue files and compiles templates // vue-style-loader css-loader parses CSS styles and inserts them into style tags, vue-style-loader supports server-side rendering const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode: 'development',
    output: {
        filename: '[name].bundle.js' , // The default is main, the default is the dist directory path: path.resolve(__dirname,'../dist')
    },
    module: {
        rules: [{
            test: /\.vue$/,
            use: 'vue-loader'
        }, {
            test: /\.js$/,
            use: {
                loader: 'babel-loader', // @babel/core -> preset-env
                options:
                    presets: ['@babel/preset-env'], // Collection of plugins}
            },
            exclude: /node_modules/ // indicates that files under node_modules do not need to be searched}, {
            test: /\.css$/,
            use: ['vue-style-loader', {
                loader: 'css-loader',
                options:
                    esModule: false, // Note that vue-style-loader is used in conjunction with
                }
            }] // Execute from right to left }]
    },
    plugins: [
        new VueLoaderPlugin() // Fixed]
}

const {merge} = require('webpack-merge');
const base = require('./webpack.base');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = merge(base,{
    entry: {
        client:path.resolve(__dirname, '../src/client-entry.js')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html'),
            filename:'client.html'
            // The default name is index.html
        }),
    ]
})

const base = require('./webpack.base')
const {merge} = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = merge(base,{
    target:'node',
    entry: {
        server:path.resolve(__dirname, '../src/server-entry.js')
    },
    output:{
        libraryTarget:"commonjs2" // module.exports export},
    plugins:[
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.ssr.html'),
            filename:'server.html',
            excludeChunks:['server'],
            minify:false,
            client:'/client.bundle.js'
            // The default name is index.html
        }),
    ]
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--vue-ssr-outlet-->

    <!-- ejs template -->
    <script src="<%=htmlWebpackPlugin.options.client%>"></script>
</body>
</html>

<!--vue-ssr-outlet--> is the fixed slot position used by the server to render the DOM. <%=htmlWebpackPlugin.options.client%> fills the variables of htmlwebpackplugin

import Vue from 'vue';
import App from './App.vue'
import createRouter from './router.js'
import createStore from './store.js'
// The purpose of converting the entry into a function is to return a new instance through this factory function every time the server is rendered, ensuring that everyone who visits can get their own instance export default () => {
    const router = createRouter();
    const store = createStore()
    const app = new Vue({
        router,
        store,
        render: h => h(App)
    });
    return { app, router, store }
}

<template>
  <div id="app">
    <router-link to="/">foo</router-link>
    <router-link to="/bar">bar</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {};
</script>

<template>
  <div>
    {{ $store.state.name }}  
   
  </div>
</template>

<style scoped="true">
div {
  background: red;
}
</style>

<script>
export default {
    asyncData(store){ //Method executed on the server, but this method is executed on the backend console.log('server call')
       // axios.get('/server path')
        return Promise.resolve('success')
    },
    mounted(){ // Browser executes, backend ignores}
}
</script>

<template>
    <div @click="show">foo</div>
</template>
<script>
export default {
    methods:{
        show(){
            alert(1)
        }
    }
}
</script>

import Vue from 'vue';
import VueRouter from 'vue-router';
import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'
Vue.use(VueRouter); // Two global components will be provided internally Vue.component()


//Everyone who accesses the server needs to generate a routing system export default ()=>{
    let router = new VueRouter({
        mode:'history',
        routes:[
            {path:'/',component:Foo},
            {path:'/bar',component:Bar}, // Lazy loading, dynamically load the corresponding component according to the path {path:'*',component:{
                render:(h)=>h('div',{},'404')
            }}
        ]
    });
    return router;
}




//Two ways of front-end routing hash history

// hash # 

// Routing is to render different components according to different paths. The characteristic of hash value is that the change of hash value will not cause the page to be re-rendered. We can monitor the change of hash value to display the corresponding component (history can be generated). The characteristic of hashApi is that it is ugly (the server cannot obtain the hash value)

// historyApi H5's api is beautiful. The problem is that when refreshing it produces a 404. 

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
//Use vuex on the server to save data to the global variable window, and replace the data rendered by the server with the data rendered by the browser export default ()=>{
    let store = new Vuex.Store({
        state:{
            name:'zhufeng'
        },
        mutations:
            changeName(state,payload){
                state.name = payload
            }
        },
        actions:{
            changeName({commit}){// store.dispatch('changeName')
                return new Promise((resolve,reject)=>{
                    setTimeout(() => {
                        commit('changeName','jiangwen');
                        resolve();
                    }, 5000);
                })
            }
        }

    });

    if(typeof window!='undefined' && window.__INITIAL_STATE__){
        // The browser starts rendering // Synchronize the rendered results of the backend to the core method in the front-end vuex store.replaceState(window.__INITIAL_STATE__); // Replace with the data loaded by the server}
    return store;
}

import createApp from './app.js';
let {app} = createApp();
app.$mount('#app'); // Client-side rendering can directly use client-entry.js

// Server entry import createApp from './app.js';


// Server-side rendering can return a function export default (context) => { // The server will pass in the url attribute when calling the method // This method is called on the server // Routing is an asynchronous component so I need to wait for the route to load here const { url } = context;
    return new Promise((resolve, reject) => { // renderToString()
        let { app, router, store } = createApp(); // vue-router
        router.push(url); // Indicates permanent jump/path router.onReady(() => { // Waiting for the route to jump to complete and the component is ready to trigger const matchComponents = router.getMatchedComponents(); // /abc


            if (matchComponents.length == 0) { //No match to the front-end route return reject({ code: 404 });
            } else {
                // matchComponents refers to all components matched by the route (page-level components)
                Promise.all(matchComponents.map(component => {
                    if (component.asyncData) { // The server will find the asyncData in the page-level component by default when rendering, and will also create a vuex on the server and pass it to asyncData
                        return component.asyncData(store)
                    }
                })).then(()=>{ // A variable will be generated under the window by default. This is done by default // "window.__INITIAL_STATE__={"name":"jiangwen"}"
                    context.state = store.state; // After the server is executed, the latest state is saved in store.state resolve(app); // app is the instance that has obtained the data })
            }
        })
    })



    // app corresponds to newVue and is not managed by the router. I hope to wait until the router jumps before performing server-side rendering // When a user visits a non-existent page, how to match the front-end route // A new application can be generated every time}

// When the user visits bar: I perform server-side rendering directly on the server, and the rendered result is returned to the browser. The browser loads the js script, loads the js script according to the path, and re-renders the bar

const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const router = new Router();
const VueServerRenderer = require('vue-server-renderer')
const static = require('koa-static')

const fs = require('fs');
const path = require('path')
const serverBundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.bundle.js'), 'utf8')
const template = fs.readFileSync(path.resolve(__dirname, 'dist/server.html'), 'utf8');


// Create a renderer based on the instance and pass in the packaged js and template file const render = VueServerRenderer.createBundleRenderer(serverBundle, {
    template
})

// Request to localhost:3000/ According to the request url parameter -》 {url:ctx.url}, pass it to serverBundle, then it will render a page with the complete DOM deconstruction of the route according to the packaged .js routing system on the server. router.get('/', async (ctx) => {
    console.log('jump')
    ctx.body = await new Promise((resolve, reject) => {
        render.renderToString({url:ctx.url},(err, html) => { // If you want CSS to take effect, you can only use the callback method if (err) reject(err);
            resolve(html)
        })
    })
    // const html = await render.renderToString(); // Generate a string // console.log(html)
})

// When the user visits a server path that does not exist, I will return to your homepage. When you render through the front-end js, the component will be re-rendered according to the path. // As long as the user refreshes, it will send a request to the server. router.get('/(.*)', async (ctx)=>{
    console.log('jump')
    ctx.body = await new Promise((resolve, reject) => {
        render.renderToString({url:ctx.url},(err, html) => { // Return after rendering via server-side rendering if (err && err.code == 404) resolve(`not found`);
            console.log(html)
            resolve(html)
        })
    })
})


// When the client sends a request, it will first search in the dist directory app.use(static(path.resolve(__dirname,'dist'))); // Sequence problem app.use(router.routes());

// Make sure to use your defined route before searching for static files app.listen(3000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--vue-ssr-outlet-->

    <!-- ejs template -->
    <script src="/client.bundle.js"></script>
</body>
</html>

"run:all": "concurrently \"npm run client:build\" \"npm run server:build\""