SSR 服务器渲染 server side render

CSR client side render 客户端渲染

SSR api

<body>
  <!--vue-ssr-outlet -->
</body>

const express = require("express");
const Vue = require("vue");
const fs = require("fs");
const serverRender = require("vue-server-renderder");
const server = express();

server.get("*", (req, res) => {
  const app = new Vue({
    data() {
      return {
        msg: "ssr",
      };
    },
    template: "<div>{{msg}}</div>",
  });
  //   npm install vue-server-renderer
  //   const render = serverRender.createRenderer();
  const render = serverRender.createRenderer({
    template: fs.readFileSync("./index.html", "utf-8"),
  });

  render.renderToString(app, (err, html) => {
    res.send(req.url);
  });
});

server.listen(12306, () => {
  console.log("server is running at 12306");
});

SSR 环境搭建

依赖

webpack webpack-cli webpack-dev-server webpack-merge
vue vue-loader vue-template-compiler vue-server-renderer
babel-loader @babel/core @babel/preset-env
vue-style-loader css-loader
express html-webpack-plugin

// webpack.config.js
const {resolve} = require('path');
const {VueLoaderPlugin} = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/main.js',
    output:{
        filename:'bundle.js'
        path:resolve('./dist')
    },
    module:{
        rules:[
            {
                test:/.vue$/,
                use:'vue-loader',
            },{
                test:/.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                },
                exclude:/node_modules/
            },{
                test:/.css$/,
                // 先写后用
                use:['vue-style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:resolve('./public/index.html'),


        })
    ]
}

// main.js
import Vue from "vue";
import app from "./app.vue";
// new Vue({
//   el: "#app",
//   render: (h) => h(app),
// });

export default function () {
  const app = new Vue({
    render: (h) => h(App),
  });
  return { app };
}

// server.js
const express = require("express");
constserver = express();
server.get("*", (req, res) => {
  // 1创建vue实例
  //    const app = createApp();
  // 2创建渲染器
  // 3利用渲染器将vue实例转化成html字符串

  res.send("hello");
});

server.listen(12306, () => {
  console.log("server is running");
});

// client.entry.js
import createApp  form './main.js'

const app = createApp();
app.$mount('#app')

// server.entry.js
import createApp from "./main.js";

export default function () {
  const { app } = createApp();
  return app;
}

// webpack.base.js
// webpack.server.js
// webpack.client.js

# SSR 服务器渲染 server side render

# CSR client side render 客户端渲染

# SSR api

# SSR 环境搭建

SSR 服务器渲染 server side render

CSR client side render 客户端渲染

SSR api

SSR 环境搭建