07 Vue 服务端渲染 SSR

2020-07-15 本文已影响0人 LM林慕

07服务端渲染SSR

理解 SSR

传统 web 开发

传统 web 开发，网页内容在服务端渲染完成，一次性传输到浏览器。

  // npm i express -S
  const express = require('express')
  const app = express()

  app.get('/', function (req, res) {
    res.send(
      `
      <html>
        <body>
          <div>
            <h1>test</h1>
          </div>
        </body>
      </html>
      `
    )
  })

  app.listen(3000, () => {
    console.log('启动成功')
  })

打开项目，查看源码：

浏览器拿到的，就是全部的dom结构。

SPA（Single Page App）时代

到了vue，react时代，单页应用优秀的用户体验，逐渐成为了主流，页面整体是js渲染出来的，称之为客户端渲染CSR。

image.png

打开页面查看源码，浏览器拿到的仅有宿主元素 #app，并没有内容。

这里可以看到单页应用的两个缺点：

首屏渲染等待时长：必须等 js 加载完毕，并且执行完毕，才能渲染出首屏；
SEO 不友好：爬虫只能拿到一个 div，认为页面是空的，不利于 SEO。

服务端渲染 Server Side Render

为了解决上面的两个问题，出现了 SSR 解决方案，后端渲染出完整的首屏 dom 结构返回，前端拿到的内容带上首屏，后续的页面操作，再用单页的路由跳转和渲染，这种渲染方式称为服务端渲染（Server Side Render）

image.png

SSR 体验：nuxt.js

Nuxt.js 是一个基于 Vue 的通用应用框架。通过对客户端、服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

结论：

Nuxt 不仅仅用于服务端渲染也可用于 SPA 应用开发；
利用 Nuxt 提供的基础项目结构、异步数据加载、中间件支持、布局等特性可大幅提高开发效率；
Nuxt 可用于网站静态化。

Nuxt.js 特性

基于 Vue
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES6、ES7 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器：Sass、Less、Stylus 等等
支持 HTTP2 推送

Nuxt 渲染流程

一个完整的服务器请求到渲染的流程

image.png

Nuxt 安装

运行 create-nuxt-app

npx create-nuxt-app <项目名>

运行项目：

npm run dev

目录结构：

assets：资源目录 assets 用于组织未编译的静态资源如 Less、Sass 或 JavaScript；
components：组件目录 components 用于组织应用的 Vue 组件。Nuxt.js 不会扩展增强该目录 Vue 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性；
layouts：布局目录 layouts 用于组织应用的布局组件；
middleware：middleware 目录用于存放应用的中间件；
pages：页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 Vue 文件并自动生成对应的路由配置；
plugins：插件目录 plugins 用于组织那些需要在根 Vue 应用实例化之前需要运行的 JS 插件；
static：静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径下；
store：store 目录用于组织应用的 Vuex 状态树文件。Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置；
nuxt.config.js：nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

约定优于配置

page 目录中所有 *.vue 的文件生成应用的路由配置，新建 pages/users.vue

/* 展示模板 */
<template>
<div id='app'>
  用户列表
</div>
</template>
<script>
//导入组件
export default {
  name: 'App'
}
</script>
<style>
/* 样式代码 */
#app {
}
</style>

启动后访问：http://localhost:3000/users

路由

导航

<nuxt-link to='/users'>用户列表</nuxt-link>

功能和 router-link 等效。

基础路由

修改 pages 中页面组织如下：

pages/
--|  users/
----|  index.vue
----|  detail.vue
--|  index.vue

Nuxt.js 自动生成的路由配置如下：

router:{
  routes:[
    {
      name:'index',
      path:'/',
      component:'pages/index.vue'
    },
    {
      name:'users',
      path:'/users',
      component:'pages/users/index.vue'
    },
    {
      name:'users-detail',
      path:'/users/detail',
      component:'pages/users/detail.vue'
    }
  ]
}

测试代码：

// 移动users.vue至users/并重命名为index.vue
// 在users/创建detail.vue
<el-button @click="$router.push('users')">用户列表</el-button>
<el-button @click="$router.push({name:'users-detail'})">用户列表</el-button>

动态路由

以下划线作为前缀的 Vue 文件或目录会被定义为动态路由，如下面文件结构：

pages/
--|  users/
----|  _id.vue

会生成如下路由配置：

{
  name:'users-id',
  path:'/users/:id',
  component:'pages/users/_id.vue'
}

id 是必选参数，如果 users 里面不存 index.vue，它将被作为可选参数。

测试代码：

 //创建users/_id.vue
    <el-button @click="$router.push({name:'users-detail',query:{id:1}})">用户列表</el-button>
    <el-button @click="$router.push({name:'users-id',params:{id:1}})">用户列表</el-button>

嵌套路由

构造文件结构如下：

pages/
--|  users/
----|  _id.vue
----|  index.vue
--|  users.vue

生成的路由配置如下：

{
  path: '/users',
  component: 'pages/users.vue',
  children: [
    {
      path: '',
      component: 'pages/users/index.vue',
      name: 'users'
    },
    {
      path: ':id',
      component:'pages/users/_id.vue',
      name:'users-id'
    }
  ]
}

测试代码：

<template>
  <div>
    用户中心
    <nuxt-child/>
  </div>
</template>

nuxt-child 等效于 router-view。

视图

下图展示了 Nuxt.js 如何为指定的路由配置数据和视图：

image.png

默认布局

创建 layouts/default.vue

<template>
  <nuxt/>
</template>

自定义布局

创建 layouts/users.vue

<template>
  <div>
    <h1>用户导航在这里</h1>
    <nuxt/>
  </div>
</template>

告诉页面 pages/users.vue 使用自定义布局：

export default {
  layout:'users'
}

错误页面

创建 layouts/error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode===404">页面不存在</h1>
    <h1 v-else>
      应用发生错误异常
    </h1>
    <nuxt-link to="/">首页</nuxt-link>
  </div>
</template>
<script>
export default {
  props: ['error']
}
</script>

测试代码，users.vue

// 添加一个不存在数据访问
{{foo.bar}}

页面

页面组件实际上是 Vue 组件，只不过 Nuxt 为这些组件添加了一些特殊的配置项：

<script>
export default {
  asyncData (context) {
    //每次组件加载前调用
    return { name: 'World' }
  },
  head () {
    //设置页面meta
  },
  // 其他功能
  ...
  }
</script>

示例代码：users.vue

export default{
  head:{// 修改页面标题
    title:'用户列表'
  }
};

异步获取数据

asyncData 方法使得我们可以在设置组件的数据之前能异步获取或处理数据。

范例代码：

<template>
  <div>
    用户列表
    <ul>
      <li v-for='user in users'
          :key='user.id'>{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
function getUsers () {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ name: 'tom', id: 1 }, { name: 'jerry', id: 2 }])
    }, 1500)
  })
}

export default {
  // 可以返回Promise
  // asyncData(){
  //   return getUsers().then(users=>({users}))
  // }
  // 也可以使用async/await
  async asyncData () {
    // 使用async/await
    const users = await getUsers()
    return { users }
  }
}
</script>

注意事项：

asyncData 方法会在组件（限于页面组件）每次加载之前被调用；
asyncData 可以在服务端或路由更新之前被调用；
第一个参数被设定为当前页面的上下文对象
Nuxt 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件；
由于 asyncData 方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

上下文对象的使用

users/detail.vue

<script>
export default {
  async asyncData ({ query, error }) {
    if (query.id) {
      return { user: { name: 'tom' } }
    }
    error({ statusCode: 400, message: '请传递用户id' })
  }
}
</script>

可以从上下文获取参数、错误处理函数、重定向函数等有用对象

整合 axios

安装 @nuxt/axios：

npm i @nuxtjs/axios

配置：nuxt.config.js

  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    proxy: true
  }
  proxy:{
    '/api/':'http://localhost:3001/'
  }

测试代码：

// 修改users/_id.vue
async asyncData({ params, $axios }) {
    // 注意返回的就是响应数据
    const data = await $axios.$get(`/api/users/${params.id}`);
    if (data.ok) {
      return { user: data.user };
    }
    error({ statusCode: 400, message: "id有误，查询失败" });
  }

// 创建server/api-server.js
// npm i koa-router
const Koa = require("koa");
const app = new Koa();
const Router = require('koa-router')
const router = new Router({prefix:'/api/users'})

const users = [{ name: "tom", id: 1 }, { name: "jerry", id: 2 }];

router.get('/:id', ctx => {
    const user = users.find(u => u.id == ctx.params.id)
    if (user) {
        ctx.body = {ok:1, user};
    }
    else {
        ctx.body = {ok:0}
    }
})

app.use(router.routes());
app.listen(3001);

拦截器实现：

// nuxt.config.js
plugins:[
  '~/plugins/axios'
]

// 创建plugins/axios.js
export default function({$axios,redirect}){
  // onRequest为请求拦截器帮助方法
  $axios.onRequest(config=>{
    if(!process.server)
      config.headers.token='jilei'
  })
}

Vuex

应用根目录下如果存在 store 目录，Nuxt.js 将启用 vuex 状态树。

定义各状态树时具名导出 state，mutations，getters，actions 即可。

// store/index.js
export const state = () => ({
    counter: 0
})

export const mutations = {
    increment(state) {
        state.counter++
    }
}

// store/users.js
export const state = () => ({
  list: []
});

export const mutations = {
  set(state, list) {
    state.list = list;
  },
  add(state, name) {
    state.list.push({ name });
  }
};

生成状态树如下：

new Vuex.Store({
  state: () => ({
    counter: 0
  }),
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  modules: {
    users: {
      namespaced: true,
      state: () => ({
        list: []
      }),
      mutations: {
        set(state, list) {
          state.list = list;
        },
        add(state,{text}){
          state.list.push({
            text,
            done:false
          })
        }
      }
    }
  }
})

使用状态，index 中处于根，其他文件以文件名作为模块名，users/index.vue

<template>
  <div>
    用户列表
    <p @click="increment">计数: {{counter}}</p>
    <p>
      <input type="text" placeholder="添加用户" @keyup.enter="add($event.target.value)">
    </p>
    <ul>
      <li v-for="user in list" :key="user.id">{{user.name}}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

function getUsers() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ name: "tom", id: 1 }, { name: "jerry", id: 2 }]);
    }, 1500);
  });
}

export default {
  fetch({ store }) {
    // fetch在创建组件前执行填充状态树
    // 提交时注意命名空间
    return getUsers().then(users => store.commit("users/set", users));
  },
  computed: {
    ...mapState(["counter"]),
    ...mapState("users", ["list"])
  },
  methods: {
    ...mapMutations(["increment"]),
    ...mapMutations("users", ["add"])
  }
};
</script>

<style scoped>
</style>

Vue SSR 实战

新建工程

vue-cli 创建工程即可：

vue create ssr

安装依赖

npm install vue-server-renderer@2.6.10 -S

要确保 Vue、vue-server-renderer 版本一致

启动脚本

创建一个 express 服务器，将 Vue SSR 集成进来，./server/03-simple-ssr.js。

const express = require("express");
const app = express();
// 导入Vue构造函数
const Vue = require("vue");
// createRenderer用于获取渲染器
const { createRenderer } = require("vue-server-renderer");
// 获取渲染器
const renderer = createRenderer();
app.get("/", async (req, res) => {
  // 创建一个待渲染vue实例
  const vm = new Vue({
    data: { name: "林慕测试SSR" },
    template: `
<div >
<h1>{{name}}</h1>
</div>
`
  });
  try {
    // renderToString将vue实例渲染为html字符串，它返回一个Promise
    const html = await renderer.renderToString(vm);
    // 返回html给客户端
    res.send(html);
  } catch (error) {
    // 渲染出错返回500错误
    res.status(500).send("Internal Server Error");
  }
});
app.listen(3000);

路由

路由仍然支持使用 vue-router

安装

若未引入 vue-router 则需要安装

npm i vue-router -S

创建路由实例

每次请求的 URL 委托给 vue-router 处理：

// 引入vue-router
const Router = require('vue-router')
Vue.use(Router)
// path修改为通配符
app.get('*', async function (req, res) {
  // 每次创建一个路由实例
  const router = new Router({
    routes: [
      { path: "/", component: { template: '<div>index page</div>' } },
      { path: "/detail", component: { template: '<div>detail page</div>' } }
    ]
  });
  const vm = new Vue({
    data: { msg: '林慕测试' },
    // 添加router-view显示内容
    template: `
<div>
<router-link to="/">index</router-link>
<router-link to="/detail">detail</router-link>
<router-view></router-view>
</div>`,
    router, // 挂载
  })
  try {
    // 跳转至对应路由
    router.push(req.url);
    const html = await renderer.renderToString(vm)
    res.send(html)
  } catch (error) {
    res.status(500).send('渲染出错')
  }
})

同构开发 SSR 应用

对于同构开发，我们依然使用 Webpack 打包，我们要解决两个问题：服务端首屏渲染和客户端激活。

构建流程

目标是生成一个服务器 bundle 用于服务端首屏渲染，和一个客户端 bundle 用于客户端激活。

image.png

通常前端都是 Vue 单文件组件，用 vue-loader 构建，所以 SSR 环境需要 Webpack，怎么操作呢？下面开始：

代码结构

除了两个不同入口之外，其他结构和之前 Vue 应用完全相同。

src
├── router
├────── index.js # 路由声明
├── store
├────── index.js # 全局状态
├── main.js # 用于创建vue实例
├── entry-client.js # 客户端入口，用于静态内容“激活”
└── entry-server.js # 服务端入口，用于首屏内容渲染

路由配置

创建 @/router/index.js

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

//导出工厂函数
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      // 客户端没有编译器，这里要写成渲染函数
      { path: "/", component: { render: h => h('div', 'index page') } },
      { path: "/detail", component: { render: h => h('div', 'detail page') } }
    ]
  });
}

主文件

主文件是负责创建 Vue 实例的工厂，每次请求均会有独立的 Vue 实例创建。创建 main.js：

import Vue from "vue";
import App from "./App.vue";
import { createRouter } from "./router";
// 导出Vue实例工厂函数，为每次请求创建独立实例
// 上下文用于给vue实例传递参数
export function createApp (context) {
  const router = createRouter();
  const app = new Vue({
    router,
    context,
    render: h => h(App)
  });
  return { app, router };
}

服务端入口

上面的 bundle 就是 Webpack 打包的服务端 bundle，我们需要编写服务端入口文件 src/entry-server.js。

它的任务是创建 Vue 实例并根据传入 URL 指定首屏。

import { createApp } from "./main";
// 返回一个函数，接收请求上下文，返回创建的vue实例
export default context => {
  // 这里返回一个Promise，确保路由或组件准备就绪
  return new Promise((resolve, reject) => {
    const { app, router } = createApp(context);
    // 跳转到首屏的地址
    router.push(context.url);
    // 路由就绪，返回结果
    router.onReady(() => {
      resolve(app);
    }, reject);
  });
};

客户端入口

客户端入口只需创建 Vue 实例并执行挂载，这一步称为激活。创建 entry-client.js。

import { createApp } from "./main";
// 创建vue、router实例
const { app, router } = createApp();
// 路由就绪，执行挂载
router.onReady(() => {
  app.$mount("#app");
});

Webpack 配置

安装依赖

npm install webpack-node-externals lodash.merge -D

具体配置：vue.config.js

// 两个插件分别负责打包客户端和服务端
const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");
// 根据传入环境变量决定入口文件和相应配置项
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";
module.exports = {
  css: {
    extract: false
  },
  outputDir: './dist/' + target,
  configureWebpack: () => ({
    // 将 entry 指向应用程序的 server / client 文件
    entry: `./src/entry-${target}.js`,
    // 对 bundle renderer 提供 source map 支持
    devtool: 'source-map',
    // target设置为node使webpack以Node适用的方式处理动态导入，
    // 并且还会在编译Vue组件时告知`vue-loader`输出面向服务器代码。
    target: TARGET_NODE ? "node" : "web",
    // 是否模拟node全局变量
    node: TARGET_NODE ? undefined : false,
    output: {
      // 此处使用Node风格导出模块
      libraryTarget: TARGET_NODE ? "commonjs2" : undefined
    },
    // https://webpack.js.org/configuration/externals/#function
    // https://github.com/liady/webpack-node-externals
    // 外置化应用程序依赖模块。可以使服务器构建速度更快，并生成较小的打包文件。
    externals: TARGET_NODE
      ? nodeExternals({
        // 不要外置化webpack需要处理的依赖模块。
        // 可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
        // 还应该将修改`global`（例如polyfill）的依赖模块列入白名单
        whitelist: [/\.css$/]
      })
      : undefined,
    optimization: {
      splitChunks: undefined
    },
    // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
    // 服务端默认文件名为 `vue-ssr-server-bundle.json`
    // 客户端默认文件名为 `vue-ssr-client-manifest.json`。
    plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
  }),
  chainWebpack: config => {
    // cli4项目添加
    if (TARGET_NODE) {
      config.optimization.delete('splitChunks')
    }
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap(options => {
        merge(options, {
          optimizeSSR: false
        });
      });
  }
};

脚本配置

安装依赖

npm i cross-env -D

定义创建脚本，package.json

"scripts": {
  "build:client": "vue-cli-service build",
  "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
  "build": "npm run build:server && npm run build:client"
},

执行打包：npm run build

宿主文件

最后需要定义宿主文件，修改./public/index.html

<!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>Document</title>
</head>

<body>
  <!--vue-ssr-outlet-->
</body>

</html>

服务器启动文件

修改服务器启动文件，现在需要处理所有路由：./server/04-ssr.js

// 获取文件路径
const resolve = dir => require('path').resolve(__dirname, dir)
// 第 1 步：开放dist/client目录，关闭默认下载index页的选项，不然到不了后面路由
app.use(express.static(resolve('../dist/client'), { index: false }))
// 第 2 步：获得一个createBundleRenderer
const { createBundleRenderer } = require("vue-server-renderer");
// 第 3 步：服务端打包文件地址
const bundle = resolve("../dist/server/vue-ssr-server-bundle.json");
// 第 4 步：创建渲染器
const renderer = createBundleRenderer(bundle, {
  runInNewContext: false, // https://ssr.vuejs.org/zh/api/#runinnewcontext
  template: require('fs').readFileSync(resolve("../public/index.html"), "utf8"), // 宿主文件
  clientManifest: require(resolve("../dist/client/vue-ssr-clientmanifest.json")) // 客户端清单
});
app.get('*', async (req, res) => {
  // 设置url和title两个重要参数
  const context = {
    title: 'ssr test',
    url: req.url
  }
  const html = await renderer.renderToString(context);
  res.send(html)
})

整合 Vuex

安装 vuex

npm install -S vuex

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export function createStore () {
  return new Vuex.Store({
    state: {
      count: 108
    },
    mutations: {
      add (state) {
        state.count += 1;
      }
    }
  })
}

挂载 store，main.js

import { createStore } from './store'
export function createApp (context) {
  // 创建实例
  const store = createStore()
  const app = new Vue({
    store, // 挂载
    render: h => h(App)
  })
  return { app, router, store }
}

使用 ./src/App.vue

<h2 @click="$store.commit('add')">{{$store.state.count}}</h2>

注意事项：注意打包和重启服务

数据预取

服务器端渲染的是应用程序的“快照”，如果应用依赖于一些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据。

异步数据获取，store/index.js


export function createStore () {
  return new Vuex.Store({
    mutations: {
      // 加一个初始化
      init (state, count) {
        state.count = count;
      },
    },
    actions: {
      // 加一个异步请求count的action
      getCount ({ commit }) {
        return new Promise(resolve => {
          setTimeout(() => {
            commit("init", Math.random() * 100);
            resolve();
          }, 1000);
        });
      },
    },
  });
}

组件中的数据预取逻辑，Index.vue

export default {
  asyncData ({ store, route }) { // 约定预取逻辑编写在预取钩子asyncData中
    // 触发 action 后，返回 Promise 以便确定请求结果
    return store.dispatch("getCount");
  }
};

服务端数据预取，entry-server.js

import { createApp } from "./app";
export default context => {
  return new Promise((resolve, reject) => {
    // 拿出store和router实例
    const { app, router, store } = createApp(context);
    router.push(context.url);
    router.onReady(() => {
      // 获取匹配的路由组件数组
      const matchedComponents = router.getMatchedComponents();
      // 若无匹配则抛出异常
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }
      // 对所有匹配的路由组件调用可能存在的`asyncData()`
      Promise.all(
        matchedComponents.map(Component => {
          if (Component.asyncData) {
            return Component.asyncData({
              store,
              route: router.currentRoute,
            });
          }
        }),
      )
        .then(() => {
          // 所有预取钩子 resolve 后，
          // store 已经填充入渲染应用所需状态
          // 将状态附加到上下文，且 `template` 选项用于 renderer 时，
          // 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
          context.state = store.state;
          resolve(app);
        })
        .catch(reject);
    }, reject);
  });
};

客户端在挂载到应用程序之前，store 就应该获取到状态，entry-client.js

// 导出store
const { app, router, store } = createApp();
// 当使用 template 时，context.state 将作为 window.__INITIAL_STATE__ 状态自动嵌入到最终的 HTML 
// 在客户端挂载到应用程序之前，store 就应该获取到状态：
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

客户端数据预取处理，main.js

Vue.mixin({
  beforeMount () {
    const { asyncData } = this.$options;
    if (asyncData) {
      // 将获取数据操作分配给 promise
      // 以便在组件中，我们可以在数据准备就绪后
      // 通过运行 `this.dataPromise.then(...)` 来执行其他任务
      this.dataPromise = asyncData({
        store: this.$store,
        route: this.$route,
      });
    }
  },
});

总结：服务端渲染的理解以及使用场景

优点

利于 SEO；
首屏渲染速度快；
可以生成缓存片段，生成静态化文件；
节能（对比客户端渲染的耗电）。

缺点

高并发时，负载会很大；
项目复杂度提高，不容易维护；
依赖库的支持。

场景

当公司 SEO 要求很高的话，需要使用服务端渲染或者预渲染（pre-renderer）；
当需要开发一个新项目时，直接使用 Nuxt.js；
当对首屏加载时间要求很高时，可尝试使用；
当需要做爬虫时，服务端渲染比客户端渲染更有优势。

性能考量

当检测到 CPU 和内存的占用较高时，可降级到 SPA；
通过同构开发，提高代码复用性，保持 SPA 项目的强交互性和服务端渲染的 SEO 优化；
当服务器的压力较大时，可使用 node server 或 nginx 做缓存。

07 Vue 服务端渲染 SSR

07服务端渲染SSR

理解 SSR

传统 web 开发

SPA（Single Page App）时代

服务端渲染 Server Side Render

SSR 体验：nuxt.js

Nuxt.js 特性

Nuxt 渲染流程

Nuxt 安装

约定优于配置

路由

视图

默认布局

自定义布局

错误页面

页面

异步获取数据

上下文对象的使用

整合 axios

Vuex

Vue SSR 实战

新建工程

安装依赖

启动脚本

路由

安装

创建路由实例

同构开发 SSR 应用

构建流程

代码结构

路由配置

主文件

服务端入口

客户端入口

Webpack 配置

脚本配置

宿主文件

服务器启动文件

整合 Vuex

数据预取

总结：服务端渲染的理解以及使用场景

优点

缺点

场景

性能考量

猜你喜欢

热点阅读