Vue3 Server Render 手把手帶你搭建

/**
 * Base Webpack config
 */
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const isProd = process.env.NODE_ENV === 'production';

const config = {
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: isProd, // extract css in production
        },
      },
      {
        test: /\.s?css$/,
        use: [
          // extract css in production
          isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              esModule: false, // css-loader > 5.0 use esModule by default
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              additionalData: '', // if you need any sass mixins can be put here
            },
          },
        ],
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  optimization: {
    minimizer: [],
  },
};

// In Production
if (isProd) {
  config.plugins.push(new MiniCssExtractPlugin({
    filename: 'css/[name].[contenthash].css',
    chunkFilename: 'css/[id].[contenthash].css',
  }));
  config.optimization.minimizer.push(new TerserPlugin());
}

module.exports = config;

/**
 * Client Webpack config
 */
const path = require('path');
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const baseConfig = require('./base.config');

const config = merge(baseConfig, {
  entry: path.resolve(__dirname, '../src/entry-client.js'),
  output: {
    path: path.resolve(__dirname, '../.ssr'),
    publicPath: '/.ssr/', // match static folder name which served by server
    filename: 'entry-client.js'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    // webpack 5 not includes these nodejs packages by default anymore
    fallback: {
      stream: require.resolve('stream-browserify'),
      buffer: require.resolve('buffer'),
    },
  },
});

// html-webpack-plugin: inject our scripts and css files or style tags
config.plugins.push(new HtmlWebpackPlugin({
  template: path.resolve(__dirname, '../index.html'),
  filename: 'index.html',
  inject: 'body',
}));

module.exports = config;

/**
 * Server Webpack config
 */
const path = require('path');
const { merge } = require('webpack-merge');
const nodeExternals = require('webpack-node-externals');

const baseConfig = require('./base.config');

const config = merge(baseConfig, {
  entry: path.resolve(__dirname, '../src/entry-server.js'),
  // output type "module" is still in experiments
  experiments: {
    outputModule: true,
  },
  output: {
    path: path.resolve(__dirname, '../.ssr'),
    filename: 'entry-server.js',
    library: {
      type: 'module', // esmodule
    },
  },
  target: 'node', // in node env
  node: {
    // tell webpack not to handle following
    __dirname: false,
    __filename: false,
  },
  externals: [nodeExternals({
    // polyfill, .vue, .css
    allowlist: [
      /\.(css|sass|scss)$/,
      /\.(vue)$/,
      /\.(html)$/,
    ],
  })], // external node_modules deps
});

module.exports = config;

// use for ssr env
import { createSSRApp } from 'vue';
import App from './App.vue';
import { createMetaManager } from './meta';
import { createStore } from './store';
import { createRouter } from './router';

// createApp receives "isServer" to diff env
export function createApp({ isServer }) {
  const meta = createMetaManager();

  const store = createStore();

  const router = createRouter({ isServer });

  const app = createSSRApp(App);

  app.use(meta).use(store).use(router);

  // expose our instance for later render usage
  return { app, meta, store, router };
}

import { createRouter as _createRouter, createWebHistory, createMemoryHistory } from 'vue-router';
import ViewHome from './views/Home.vue';
import ViewAbout from './views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: ViewHome,
  },
  {
    path: '/about',
    name: 'About',
    component: ViewAbout,
  },
];

export function createRouter({ isServer }) {
  return _createRouter({
    // diff from server and client
    history: isServer
      ? createMemoryHistory()
      : createWebHistory(),
    routes,
  })
};

import { createStore as _createStore } from 'vuex';

export function createStore() {
  return _createStore({
    strict: true,
  });
};

import { createMetaManager as _createMetaManager } from 'vue-meta';

export function createMetaManager() {
  return _createMetaManager();
}

import { createApp } from './main';

// open an async
(async () => {
  console.log('pass client');
  const { app, router } = createApp({ isServer: false });

  // wait for router ready
  await router.isReady();
  
  // mount to our app wrapper
  app.mount('#__maju');
})();

import { createApp } from './main';

// context will be injected by our server
export default async function serverEntry(context) {
  console.log('pass server');
  const { app, router, store, meta } = createApp({ isServer: true });

  // set server-side router's location
  router.push(context.url);

  // bind instance to context
  context.meta = meta;
  context.store = store;

  // wait for router ready
  await router.isReady();

  const matchedComponents = router.currentRoute.value.matched;
  // no matched routes, pass with next()
  if (!matchedComponents.length) {
    // error 404 or pass to other middleware
    context.next();
  }

  // the Promise should resolve to the app instance so it can be rendered
  return app;
}

import path from 'path';
import express from 'express';
import compileServer from './compile';

// create express server
const server = express();

// serve static files in .ssr folder
server.use('/.ssr', express.static(path.join(__dirname, '../.ssr')));

// compile server html and serve
compileServer(server);

// listen port
const port = process.env.PORT || 3000;

server.listen(port, () => console.log(`Vue3 SSR server at port: ${port}`));

import fs from 'fs';
import path from 'path';
import { renderToString } from '@vue/server-renderer';
import serverEntry from '../.ssr/entry-server.js'; // import out compiled server entry

/**
 * renderMetaToString
 * @param {vue app instance} app 
 * @returns 
 */
async function renderMetaToString(app) {
  const ctx = {};
  const appHtml = await renderToString(app, ctx);
  if (!ctx.teleports || !ctx.teleports.head) {
    const teleports = app.config.globalProperties.$metaManager.render();
    await Promise.all(teleports.map((teleport) => renderToString(teleport, ctx)));
  }

  const { teleports } = ctx;
  for (const target in teleports) {
    if (target.endsWith('Attrs')) {
      const str = teleports[target];
      // match from first space to first >, these should be all rendered attributes
      teleports[target] = str.slice(str.indexOf(' ') + 1, str.indexOf('>'));
    }
  }

  return [appHtml, ctx];
}

/**
 * renderWithMeta
 * @param {vue app instance} app
 * @returns {html string}
 */
async function renderWithMeta(app) {
  const [appHtml, ctx] = await renderMetaToString(app);

  // index.html injected with entry-client.js and css files
  const wrapper = fs.readFileSync(
    path.join(__dirname, '../.ssr/index.html'),
    'utf-8',
  );

  // replace meta tags in template
  return wrapper
    .replace('{{ HTML_ATTRS }}', ctx.teleports.htmlAttrs || '')
    .replace('{{ HEAD_ATTRS }}', ctx.teleports.headAttrs || '')
    .replace('{{ HEAD }}', ctx.teleports.head || '')
    .replace('{{ BODY_ATTRS }}', ctx.teleports.bodyAttrs || '')
    .replace('{{ APP }}', `<div id="__maju">${appHtml}</div>`);
}

export default function compileServer(serverApp) {
  serverApp.get('*', async (req, res, next) => {
    // context
    const context = {
      url: req.url,
      next,
    };

    // init app instance
    const app = await serverEntry(context);
  
    // render app to html
    const html = await renderWithMeta(app);

    // return
    res.end(html);
  })
}