vue ssr 指南详读

Vue SSR指南详读攻略

什么是Vue SSR？

Vue SSR是指Vue.js在服务端渲染（Server Side Rendering）时所使用的技术。服务端渲染是一种将Vue实例渲染成HTML字符串最后将其发到客户端的技术，这意味着在客户端浏览器解析JavaScript之前，网页的主要内容已经准备好了并呈现出来。通过服务端渲染，可以提升网页的首屏加载速度和SEO友好性。

Vue SSR的优势

提升首屏加载速度，提升用户体验
更好的SEO优化效果
从服务端数据获取渲染，而不是依赖客户端渲染
更好的利用服务器资源，减轻客户端压力

Vue SSR的流程

服务端接收请求，根据请求路由确定渲染组件
渲染组件获取服务端数据，并将其传递给组件
组件使用数据渲染，生成HTML字符串
HTML字符串返回给客户端

Vue SSR的局限性

需要额外的服务器资源去渲染HTML
在某些情况下不易实现（例如高交互的单页面应用）

Vue SSR的实现

Vue SSR除了需要前端框架Vue.js的基础知识之外，还需要具备Node.js、Webpack、Express等技术栈的相关知识。具体实现流程如下：

使用vue-server-renderer插件将组件转换成HTML字符串
使用Node.js搭建服务器，将HTML字符串返回给客户端
配置Webpack对服务端组件进行打包
配置服务器路由，确定哪个请求对应哪个组件

示例一：服务器渲染组件

以下示例使用Vue.js和Express实现服务器渲染。

创建Vue组件，并命名为“App”：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue SSR',
      description: 'Vue Server Side Rendering'
    }
  }
}
</script>

构建服务器端渲染代码

const express = require('express')
const Vue = require('vue')
const server = express()
const renderer = require('vue-server-renderer').createRenderer()

server.get('/', (req, res) => {
  const app = new Vue({
    template: '<div>My App</div>'
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html>
        <head><title>Hello World!</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8000)

运行服务器端代码，在浏览器中访问localhost:8000可以看到输出结果。

示例二：在Vue.js应用中使用SSR

以下示例使用Vue.js和Webpack实现在Vue.js应用中使用SSR。

安装相关依赖：

npm install vue vue-server-renderer express webpack webpack-dev-middleware webpack-hot-middleware

创建Vue组件，并命名为“App”：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue SSR',
      description: 'Vue Server Side Rendering'
    }
  }
}
</script>

创建Webpack配置文件（webpack.config.js）：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const path = require('path')

const webpackConfig = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: './src/entry-server.js',
  target: 'node',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new VueSSRServerPlugin()
  ]
}

module.exports = webpackConfig

创建Webpack客户端配置文件（webpack.config.client.js）：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const webpackConfig = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: {
    app: './src/entry-client.js'
  },
  devServer: {
    hot: true,
    inline: true,
    progress: true,
    contentBase: path.resolve(__dirname, './dist')
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = webpackConfig

创建服务器代码（server.js）：

const express = require('express')
const server = express()
const path = require('path')

const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync(path.resolve(__dirname, './index.html'), 'utf-8')
})

const createApp = require('./src/create-app')

server.use('/dist', express.static(path.resolve(__dirname, './dist')))

server.get('*', (req, res) => {
  const context = { url: req.url }

  createApp(context).then(app => {
    renderer.renderToString(app, (err, html) => {
      if (err) {
        res.status(500).end('Internal Server Error')
        return
      }
      res.end(html)
    })
  }).catch(err => {
    console.log(err)
    res.status(500).end('Internal Server Error')
  })
})

server.listen(8000)

创建客户端入口代码（entry-client.js）：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const app = new Vue({
  render: h => h(App)
})

app.$mount('#app')

创建服务端入口代码（entry-server.js）：

import Vue from 'vue'
import App from './App.vue'

export default context => {
  const app = new Vue({
    render: h => h(App)
  })

  return new Promise((resolve, reject) => {
    resolve(app)
  })
}

创建HTML模板文件（index.html）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue SSR</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/app.js"></script>
  </body>
</html>