入职第一天：前端leader手把手教我入门Vue服务器端渲染（SSR）

SSR，英文全称叫 Server side rendering ，国人叫它服务器端渲染。

首先听到这个名词，我头脑就有点眩晕。咱们还是先去官网了解下SSR的定义：

Vue.js 可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。这种在服务器和客户端都可以运行的代码程序，也可以叫做“同构”。

我弱弱地问了leader一句，咱们公司为什么要使用服务端渲染？

leader冷冷地回复，有两点原因，第一点，因为我们公司的站点很注重SEO，页面又是异步获取内容；第二点，同时也希望用户更快速地看到完整渲染的页面，从而提高用户体验。基于这两点，所以需要服务器端渲染(SSR)来解决这些问题。

那服务端渲染的流程究竟是怎样的呢？话不多说，先上图：

const path = require('path')
const ExtractPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const VueServerPlugin = require('vue-server-renderer/server-plugin')

let config

config = merge(baseConfig, {
  target: 'node',
  entry: path.join(__dirname, '../client/server-entry.js'),
  devtool: 'source-map',
  output: {
    libraryTarget: 'commonjs2',
    filename: 'server-entry.js',
    path: path.join(__dirname, '../server-build')
  },
  externals: Object.keys(require('../package.json').dependencies),
  module: {
    rules: [
      {
        test: /\.styl/,
        use: ExtractPlugin.extract({
          fallback: 'vue-style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            'stylus-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractPlugin('styles.[contentHash:8].css'),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"server"'
    }),
    new VueServerPlugin()
  ]
})

module.exports = config