深入学习服务端渲染原理及实现

最新推荐文章于 2023-04-18 10:40:11 发布

一个爱运动的前端程序媛

最新推荐文章于 2023-04-18 10:40:11 发布

阅读量470

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42118522/article/details/113923710

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、 CSR vs SSR

不同于传统拉取JS进行解析渲染的CSR（JS负责进行页面渲染），SSR实现了服务器端直接返回Html代码让浏览器进行渲染。
由此，我们就很容易理解以下代码实现了一个页面SSR：
// server.js

var express = require('express')
var app = express()
app.get('/', (req, res) => {
 res.send(
 `
   <html>
     <head>
       <title>hello</title>
     </head>
     <body>
       <h1>hello, this is SSR content.</h1>
       <p>now, let's begin to learn SSR.</p>
     </body>
   </html>
 `
 )
})
app.listen(3001, () => {
 console.log('listen:3001')
})

SSR优点：缩短首屏加载时间，便于SEO。

二、Vue项目的SSR实现

刚刚我们仅仅做到了让服务器返回一段html字符串，那么，要如何实现Vue项目的服务端渲染呢？
由于整个项目的复杂性，我们可能一时无从下手，但没关系，我们可以先从实现一个Vue组件的服务端渲染开始，在此之前，我们先从Vue实例的SSR开始吧！

1. 实现一个Vue实例的SSR

首先实现一个Vue实例，这个倒是简单，那么问题来了：“我们要如何将它转换成html代码返回给浏览器呢？
大家都学过vue，当然知道Vue的标签是基于虚拟DOM（JS对象）的，在客户端渲染中也是采用一定方法将虚拟DOM渲染为真实DOM的，那么服务端的渲染流程也是通过虚拟DOM的编译来完成的，编译虚拟DOM的方法是renderToString。在Vue中，vue-server-renderer 提供一个名为 createBundleRenderer 的 API，这个API用于创建一个 render，并且自带renderToString方法。
官网实现代码如下：
// server.js

const Vue = require('vue')
const server = require('express')()
// 创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
  // 第 1 步：创建一个 Vue 实例
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  })
  // 第 2 步：将 Vue 实例渲染为 HTML
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          // <meta charset="utf-8"> // 加上这一行就不会出现乱码了
          <title>Hello</title>
        </head>
        <body>${html}</body>
      </html>
    `)
  })
})
server.listen(8080)

启动express服务，再浏览器上打开对应端口，页面就能显示出你在Home组件中编写的内容了。但不出意外的话，大家看到页面渲染出来的是一段乱码，这是因为官网提供的示例代码返回的html字符串里没有带，加上它就OK了，在上面代码中直接取消这一行注释，至此，我们初步实现了一个Vue实例的服务端渲染。
TODO：（modify）
当你在渲染 Vue 应用程序时，renderer 只从应用程序生成 HTML 标记 (markup)。在这个示例中，我们必须用一个额外的 HTML 页面包裹容器，来包裹生成的 HTML 标记。
为了简化这些，你可以直接在创建 renderer 时提供一个页面模板。多数时候，我们会将页面模板放在特有的文件中，例如 index.template.html：

<!-- index.template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation) -->
    <title>{{ title }}</title>
    <!-- 使用三花括号(triple-mustache)进行 HTML 不转义插值(non-HTML-escaped interpolation) -->
    {{{ metas }}}
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

注意注释 – 这里将是应用程序 HTML 标记注入的地方。
然后，我们可以读取和传输文件到 Vue renderer 中：
// server.js

const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
renderer.renderToString(app, (err, html) => {
  console.log(html) // html 将是注入应用程序内容的完整页面
})

我们可以通过传入一个"渲染上下文对象"，作为 renderToString 函数的第二个参数，来提供模板插值数据，也可以与 Vue 应用程序实例共享 context 对象，允许模板插值中的组件动态地注册数据。
完整代码示例：
// server.js

const Vue = require('vue');
const server = require('express')();
const template = require('fs').readFileSync('./index.template.html', 'utf-8');
const renderer = require('vue-server-renderer').createRenderer({
  template,
});
const context = {
    title: 'vue ssr',
    metas: `
        <meta name="keyword" content="vue,ssr">
        <meta name="description" content="vue srr demo">
    `,
};
server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`,
  });
  renderer.renderToString(app, context, (err, html) => {
    console.log(html);
    if (err) {
      res.status(500).end('Internal Server Error')
      return;
    }
    res.end(html);
  });
})
server.listen(8080);

以下是个人对SSR的理解：服务端渲染实际是一套代码的两次应用，所谓的一套代码就是拿出server.js外面去的vm实例，上面之所以简单是因为我们在server内部创建的vm实例，一旦将vm拿出去，在server.js外部引入，那么涉及的就麻烦了。
这里分两条线说，一个是在server.js外面创建一个app.js；结果是无法引入到server中，而这个也不是关注的重点；
另一条线是使用vue-loader创建一个vm实例，然后引入到server中，整个vue渲染就在解决这个问题，解决引入的问题，解决引入之后与前端混合的问题。下面贴上简单案例的实现代码。
因为不能直接应用.vue文件以及外部的js文件，所以需要借助webpack，借助webpack将vue实例，转译为node可用代码，以及对前端代码进行转译。
官网中有提到：每个请求应该都是全新的、独立的应用程序实例，以便不会有交叉请求造成的状态污染。
意思就是：每次服务端渲染都要渲染一个新的app，不能再用上一次渲染过的app对象去进行下一次渲染，这是由于app已经包含上一次渲染过的状态会影响我们渲染内容，所以每次都要创建新的app，即为每个请求创建一个新的根Vue实例。因此，我们不应该直接创建一个应用程序实例，而是应该暴露一个可以重复执行的工厂函数，为每个请求创建新的应用程序实例：
// app.js

const Vue = require('vue')
module.exports= function createApp (context) {
  return new Vue({
    data: {
      title: context.title, 
      url: context.url
    },
    template: `
      <div>
        <h2>{{ title }}</h2>
        <div>访问的 URL 是：{{ url }}</div>
      </div>
    `
  })
}

服务器代码只需要更改下vue实例的生成方式就可以了：
// server.js

const createApp = require('./app')
const server = require('express')()
// 创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./index.template.html', 'utf-8')
})
server.get('*', (req, res) => {
  // 创建一个"渲染上下文对象"
  const context = {
    title: 'vue ssr',
    metas: `
      <meta name="keyword" content="vue,ssr">
      <meta name="description" content="vue srr demo">
    `,
    url: req.url
  }
  const app = createApp(context)
  // 第 2 步：将 Vue 实例渲染为 HTML
  renderer.renderToString(app, context, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    console.log(html)
    res.end(html)
  })
})
server.listen(8080)

2. 实现一个Vue组件的SSR

既然涉及到组件，那我们就必须加入路由了，官方建议使用 vue-router。同时，需要webpack来构建项目。
首先创建router.js，实现给每个请求创建一个新的 router 实例，我们在router.js中导出一个 createRouter 函数，然后更新app.js。
// router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      // ...
    ]
  })
}

// app.js

const Vue = require('vue')
module.exports= function createApp (context) {
  return new Vue({
    data: {
      title: context.title, 
      url: context.url
    },
    template: `
      <div>
        <h2>{{ title }}</h2>
        <div>访问的 URL 是：{{ url }}</div>
      </div>
    `
  })
}
import App from './App.vue'
import { createRouter } from './router'
export function createApp () {
  // 创建 router 实例
  const router = createRouter()
  const app = new Vue({
    // 注入 router 到根 Vue 实例
    router,
    render: h => h(App)
  })
  // 返回 app 和 router
  return { app, router }
}

首先实现一个Vue组件 src/views/home/index.vue，那么接下来我们仍旧是通过renderToString方法编译Vue组件来实现服务端渲染。

const Vue = require('vue');
const server = require('express')();
// 引入Vue组件
import Home from './containers/Home';
const template = require('fs').readFileSync('./index.template.html', 'utf-8');
const renderer = require('vue-server-renderer').createRenderer({
  template,
});
const context = {
    title: 'vue ssr',
    metas: `
        <meta name="keyword" content="vue,ssr">
        <meta name="description" content="vue srr demo">
    `,
};
server.get('*', (req, res) => {
  // 替换为Vue组件
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`,
  });
  renderer.renderToString(app, context, (err, html) => {
    console.log(html);
    if (err) {
      res.status(500).end('Internal Server Error')
      return;
    }
    res.end(html);
  });
})
server.listen(8080);

3. 初识同构

首先我们来了解下什么是重构？—>
前提：VUE框架用于构建客户端应用，在浏览器中输出Vue组件，生成并操作DOM。将同一个组件渲染为服务器端的HTML字符串发送到浏览器，然后将这些静态标记“激活”为客户端上可交互的应用程序。
服务器渲染的Vue.js应用程序为"同构"或"通用"，应为应用程序的大部分代码都可以在服务端和客户端运行。
通俗的讲，就是一套Vue代码在服务器上运行一遍，到达浏览器又运行一遍。服务端渲染完成页面结构，浏览器端渲染完成事件绑定，这个完成事件绑定的过程就是静态标记“激活”为客户端上可交互应用程序的过程。
那么如何进行浏览器端的事件绑定呢？
首先我们要明白：
只要开启express的静态文件服务，前端的script就能拿到控制浏览器的JS代码啦！

node作中间层及请求代码优化
作用：解决前后端协作问题
场景：
在不用中间层的前后端分离开发模式下，前端直接请求后端接口获得返回的数据，但这个返回数据的数据格式也许并非是前端需要的，但出于性能原因或其他因素无法更改接口，就需要前端来做一些数据处理操作，这无疑会产生前端性能损耗，尤其当前端处理数据量很大的时候，甚至会影响用户体验。于是引入node中间层，用于替代前端做数据处理操作，中间层的工作流：前端发送请求—>请求node层的接口—>node对于相应的前端请求做转发，用node去请求真正的后端接口获取数据—>获取后再由node层做对应的数据计算等处理操作—>返回给前端。