Vue SSR 服务端渲染原理（简易版本）

最新推荐文章于 2024-05-04 06:29:50 发布

Jiabing Yu

最新推荐文章于 2024-05-04 06:29:50 发布

阅读量1.7k

点赞数

分类专栏：性能优化文章标签： vue.js SSR 服务端渲染

本文链接：https://blog.csdn.net/qq_41308489/article/details/122685093

版权

性能优化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

在了解Vue SSR之前，我们要搞明白两个东西先：SSR 和 浏览器的渲染,
涉及到的技术:

Vue
vue-server-renderer
Nodejs
Express

1. 什么是SSR

SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。

2. 从输入页面URL到页面渲染完成流程

解析URL
浏览器本地缓存
DNS解析
建立TCP/IP连接，发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器根据返回的html进行构建DOM树，CSS规则树，如遇到script标签就加载对应的js

开始实践

(1) 第一步: `vue-server-renderer`

首先我们运用vue-server-renderer来创建一个文件，通过vue-server-renderer把我们的一个vue实例进行转化为字符串。
我们创建一个文件: server.js

const Vue = require('vue')
const app = new Vue({
    template: `<div>Hi Vue SSR!</div>`
})

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

renderer.renderToString(app, (err, html) => {
    if(err) throw err

    console.log(html)
})

我们用node执行server.js 就会返回html字符串

node server.js

在这里插入图片描述

(2) 第二步: 搭建本地服务器，借助`express框架`，渲染html

修改一下server.js

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

server.get('*', (req, res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        template: `<div>Hi Vue SSR! current url: {{url}}</div>`
    })

    renderer.renderToString(app, (err, html) => {
        if (err) {
            res.status(500).end('服务器错误: 500')
            return
        }
        res.end(
            `<!DOCTYPE html>
            <html lang="en">
            <head><title>vue ssr</title></head>
            <body>${html}</body>
            </html>`
        )
    })
})
server.listen(8080, () =>{
    console.log('服务器已开启: 127.0.0.1:8080')
})

然后执行我们的本地服务器就可以看到我们的Vue实例渲染在页面上了。

node server.js

在这里插入图片描述
按下F12查看一下html的编码

在这里插入图片描述

现在，我们简单的把一个Vue实例通过SSR渲染在页面上啦。

(3) 扩展: 借助``模板渲染html

首先创建后一个index.template.html文件，如何必须要在body插入一条注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue SSR template</title>
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>

修改我们的server.js文件，读取模板，把模板配置到vue-server-renderer

const Vue = require('vue')
const express = require('express')
const vueServerRender = require('vue-server-renderer')
const fs = require('fs')

// 1. 创建本地服务器
const server = express()

// 2. 读取VUE SSR的模板
const template = fs.readFileSync('./index.template.html', 'utf-8')

// 3. 把模板引入到renderer
const renderer = vueServerRender.createRenderer({
    template
})

server.get('*', (req, res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        // 这里的内容都会插入到<!--vue-ssr-outlet-->注释的下面
        template: `<div>Hi Vue SSR! current url: {{url}}</div>`
    })

    renderer.renderToString(app, (err, html) => {
        if (err) {
            res.status(500).end('服务器错误: 500')
            return
        }
        res.end(html)
    })
})

server.listen(8080, () =>{
    console.log('服务器已开启: 127.0.0.1:8080')
})

打开页面，查看html编码，已经把我们的内容插入到模板内容的下面
在这里插入图片描述

（4）在模板上插值：`context`

我们在server.js文件创建一个context上下文变量，然后传入到renderer的第二个参数。

const Vue = require('vue')
const express = require('express')
const vueServerRender = require('vue-server-renderer')
const fs = require('fs')

// 1. 创建本地服务器
const server = express()

// 2. 读取VUE SSR的模板
const template = fs.readFileSync('./index.template.html', 'utf-8')

// 3. 把模板引入到renderer
const renderer = vueServerRender.createRenderer({
    template
})

// 4. 定义一个上下文
const context = {
    title: 'Vue-SSR',
    metas: `
        <meta name="keyword" content="vue,ssr">
        <meta name="description" content="vue-ssr-demo">
    `
}

server.get('*', (req, res) => {
    const app = new Vue({
        data: {
            url: req.url
        },
        // 这里的内容都会插入到<!--vue-ssr-outlet-->注释的下面
        template: `<div>Hi Vue SSR! current url: {{url}}</div>`
    })
    // 传入vue实例，上下文context
    renderer.renderToString(app, context, (err, html) => {
        if (err) {
            res.status(500).end('服务器错误: 500')
            return
        }
        res.end(html)
    })
})

server.listen(8080, () =>{
    console.log('服务器已开启: 127.0.0.1:8080')
})

注意:　index.template.html文件对于标签的插入，我们是要用三个大括号，不然插入的内容会被转译为字符串:

标签两个括号的情况下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    {{metas}}
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>