SSR 第一篇，搭建简单的SSR程序

SSR

什么是SSR

把Vue 组件渲染为服务器端的HTML字符串，将他们直接发送到浏览器，最后将静态标记混合为客户端上完成全交互应用程序。

SSR 优点

SEO
首屏显示时间

SSR 缺点

开发逻辑复杂
开发条件限制：比如一些生命周期不能用，一些第三方库不能用
服务器负载大

准备工作

首先我们来构建项目

npm init -y

安装依赖

npm install vue vue-server-renderer express -D

注意：确保vue、vue-server-renderer、vue-template-compiler版本一致

创建一个express服务器，将vue ssr集成进来文件目录 server.js

// 导入express作为渲染服务器
const express = require('express')
// 导入createRenderer用于获取渲染器
const { createRenderer } = require('vue-server-renderer')
// 导入Vue用于声明待渲染实例
const Vue = require('vue')
// 创建express实例
const app = express()
// 获取渲染器
const renderer = createRenderer()
app.get('*',async function(req, res) {
  // 待渲染vue实例
  const template = new Vue({
    template: `<h1>hello world</h1>`
  })
  // renderToString可以将vue实例转换为html字符串 
  // 若未传递回调函数，则返回Promise
  const html = await renderer.renderToString(template)
  res.send(html)
})
// 绑定程序监听端口到指定的主机和端口号
app.listen(3000, function() {
  console.log('running...')
})

完成，我们来运行看看 node server.js

我们来访问一下localhost:3000，就会看到服务端写入的html结构

在网页中查看源码，可以看到 <h1 data-server-rendered="true">hello world</h1> data-server-rendered="true" 这个属性就是来告诉我们这个页面是来做服务端渲染的。

使用一个页面模板
当你在渲染 Vue 应用程序时，renderer 只从应用程序生成 HTML 标记 (markup)。在这个示例中，我们必须用一个额外的 HTML 页面包裹容器，来包裹生成的 HTML 标记。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
  <title>{{ title }}</title>
</head>
<body>
  <!--vue-ssr-outlet-->
</body>
</html>

注意  注释 -- 这里将是应用程序 HTML 标记注入的地方。

然后，我们可以读取和传输文件到 Vue renderer 中：

const template = fs.readFileSync(path.join(__dirname, './public/index.html'))
// 获取渲染器
const renderer = createRenderer({
  template
})
renderer.renderToString(app, (err, html) => {
  console.log(html) // html 将是注入应用程序内容的完整页面
})

完整实例代码

// 导入express作为渲染服务器
const express = require('express')
// 导入createRenderer用于获取渲染器
const { createRenderer } = require('vue-server-renderer')
// 导入fs模块
const fs = require('fs')
const path = require('path')
// 导入Vue用于声明待渲染实例
const Vue = require('vue')
// 创建express实例
const app = express()

const template = fs.readFileSync(path.join(__dirname, './public/index.html'))
// 获取渲染器
const renderer = createRenderer({
  template: template.toString()
})

app.get('*',async function(req, res) {
  // 待渲染vue实例
  const template = new Vue({
    template: `<h1>hello world</h1>`
  })
  // renderToString可以将vue实例转换为html字符串 
  // 若未传递回调函数，则返回Promise
  const html = await renderer.renderToString(template, {
    title: 'vue ssr'
  })
  res.send(html)
})

// 绑定程序监听端口到指定的主机和端口号
app.listen(3000, function() {
  console.log('running...')
})

我们右键查看源代码