1. 首页
  2. IT资讯

Vue SSR服务端渲染改造踩坑指南

本文将对专栏《从0到1 实战朋友圈移动Web App开发》涉及的实战项目进行Vue的SSR改造,在线体验地址,建议使用手机浏览器体验:

本文是对改造中踩的坑进行总结和梳理,至于改造的步骤,强烈建议直接参考官方文档指南:https://ssr.vuejs.org/zh/
如果在改造中遇到任何问题并难以找到解决办法,不妨试试在文中找到答案。

版本匹配

Vue的SSR渲染,可以当作一个全新的项目,需要安装依赖的模块(node_modules),可以将原先使用vue cli 3创建的项目的package.json拷贝过来,确保不缺少相关模块,然后在此基础上添加SSR需要的模块。

主要是vue-server-renderer:

npm install vue vue-server-renderer --save

vue-server-renderer是SSR渲染的核心,提供bundle renderer来调用renderToString()方法将Vue组件渲染成HTML字符串,需要注意的是vue-server-renderer 和 vue 必须匹配版本,例如@2.6.11版本的vue必须对应@2.6.11版本的vue-server-renderer 。

路由模式history

采用了vue-router的Vue的SSR渲染,必须使用history作为路由模式,因为hash模式的路由提交不到服务器上,如果之前使用的是hash模式,需要进行修改:

  const router = new Router({
    mode: 'history',
    ...
  })

两个入口

Vue的SSR渲染,一般都会是同构的,也就是业务代码是一套,通过不同的构建配置,来分别构建客户端client和服务端server,对webpack构建而言,这就需要有两个入口,修改vue.config.js来支持,代码如下:

const TARGET_NODE = process.env.WEBPACK_TARGET === 'node'

const target = TARGET_NODE ? 'server' : 'client'
  ...
    configureWebpack: {
    // 将 entry 指向应用程序的 server / client 文件
    entry: `./src/entry-${target}.js`,
    // 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import),
    // 并且还会在编译 Vue 组件时,
    // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
    target: TARGET_NODE ? 'node' : 'web',
    // node: TARGET_NODE? undefined : false,
    // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
    output: {
      libraryTarget: TARGET_NODE ? 'commonjs2' : undefined
    },
    // devtool: 'source-map',
    // https://webpack.js.org/configuration/externals/#function
    // https://github.com/liady/webpack-node-externals
    // 外置化应用程序依赖模块。可以使服务器构建速度更快,
    // 并生成较小的 bundle 文件。
    externals: TARGET_NODE ? nodeExternals({
      // 不要外置化 webpack 需要处理的依赖模块。
      // 你可以在这里添加更多的文件类型。例如,未处理 *.vue 原始文件,
      // 你还应该将修改 `global`(例如 polyfill)的依赖模块列入白名单
      whitelist: /.css$/
    }) : undefined,
    optimization: {
      splitChunks: false
    },
  },
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        return merge(options, {
          optimizeSSR: false //https://vue-loader-v14.vuejs.org/zh-cn/options.html#optimizeSSR
        })
      })
  },
  ...

其中,分别使用entry-client.js和entry-server.js作为entry入口即可,如果需要一次命令同时执行两个构建,可以修改package.json如下:

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

对于开发模式的SSR构建,由于使用不多,这里只提供生产模式的SSR构建,执行如下命令:

npm run build:server

bundle文件

Vue的SSR渲染服务端启动时,bundle renderer主要解析两个bundle文件,分别是:vue-ssr-server-bundle.json和vue-ssr-client-manifest.json文件,这两个文件分别由webpack构建生成,可以修改之前的vue.config.js配置文件:

  configureWebpack: {
    ...
    plugins: [
      TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()
    ],
    ...
  },

其中vue-ssr-server-bundle.json主要存放的是资源的映射信息,是bundle renderer必须的,而vue-ssr-client-manifest.json是对象clientManifest配置项,此对象包含了 webpack 整个构建过程的信息,从而可以让 bundle renderer自动推导需要在HTML模板中注入的内容,从而实现最佳的预加载(preload)和预取(prefetch)资源,如下图所示:
图片描述

模拟window对象

Vue的SSR渲然Vue组件(包括根组件App.vue和其若干个子组件)时,由于没有动态更新,所有的组件生命周期钩子函数中,只有 beforeCreate 和 created 会在SSR渲染过程中被调用。这就是说任何其他生命周期钩子函数中的代码(例如 beforeMount 或 mounted),只会在客户端执行。
此外还需要注意的是,应该避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码,例如在其中使用 setInterval 设置 timer。在纯客户端 (client-side only) 的代码中,我们可以设置一个 timer,然后在 beforeDestroy 或 destroyed 生命周期时将其销毁。但是,由于在 SSR 期间并不会调用销毁钩子函数,所以 timer 将永远保留下来。为了避免这种情况,请将副作用代码移动到 beforeMount 或 mounted 生命周期中。
对于SSR渲染,由于采用的Node.js环境,所以需要对于window对象做兼容处理,这里推荐使用jsdom

npm install jsdom --save

然后,在SSR的入口文件service.js中(非entry-server.js),添加如下代码:

const jsdom = require('jsdom')
const { JSDOM } = jsdom

/* 模拟window对象逻辑 */
const resourceLoader = new jsdom.ResourceLoader({
  userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
});// 设置UA
const dom = new JSDOM('', {
  url:'https://app.nihaoshijie.com.cn/index.html',
  resources: resourceLoader
});

global.window = dom.window
global.document = window.document
global.navigator = window.navigator
window.nodeis = true //给window标识出node环境的标志位
/* 模拟window对象逻辑 */

normalizeFile get undefined file错误

当运营SSR渲染,遇到如下错误时:
图片描述
该错误通常会导致vue-ssr-client-manifest.json文件中的映射信息异常,导致无法正确找到对应的资源文件,可能属于VueSSRClientPlugin()的bug,但是可以通过webpack配置来进行规避,修改vue.config.js,添加代码如下:

  css: {
    sourceMap: true
  }

相关的issue地址

在服务端请求SSR首屏数据

对于一些首屏非静态页面的场景,这些页面的渲染依赖后端数据,所以在SSR端进行数据的拉取,并且在SSR渲染完成之后,将数据直接带给客户端进行二次渲染,减少请求的次数,所以对于数据共享的方案,最合适的方式是通过Vuex的Store完成,所以这里推荐项目使用Vuex,首先修改entry-server.js代码如下:

      // 对所有匹配的路由组件调用 `asyncData()`
      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {

          return Component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        // 在所有预取钩子(preFetch hook) resolve 后,
        // 我们的 store 现在已经填充入渲染应用程序所需的状态。
        // 当我们将状态附加到上下文,
        // 并且 `template` 选项用于 renderer 时,
        // 状态将自动序列化为 `window.__INITIAL_STATE__`,并注入 HTML。
        context.state = store.state

        resolve(app)
      }).catch((err)=>{
        console.error(err)
        reject(err)
      })

同时给首屏的第一个路由组件添加asyncData方法来请求数据,注意是组件的静态方法,而非在methods中定义的方法,代码如下:

export default {
  name: 'wecircle',
  ...
  asyncData ({ store }) {
    // 触发 action 后,会返回 Promise
    return store.dispatch('setWecircleDataListSSR')
  },
  ...
}

后面的action和mutation按照正常逻辑写即可,最后,当SSR数据渲染完成后,会在生成的HTML中添加一个window.__INITIAL_STATE__对象,修改entry-client.js可以将数据直接赋值给客户端渲染,代码如下:

const { app, router, store } = createApp()

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

最后一点需要注意是由于客户端和服务端代码是同构的,但是服务端请求数据的地址和客户端是完全不一样的,所以针对这种场景,需要利用之前设置的window.nodejs标志位来判断在不同场景下的接口地址,从而区分对待。

cookie透传

当在SSR端请求数据时,可能会需要带上浏览器的cookie,在客户端到SSR服务器的请求中,客户端是携带有cookie数据的。但是在SSR服务器请求后端接口的过程中,却是没有相应的cookie数据的。因此在SSR服务器进行接口请求的时候,我们需要手动拿到客户端的cookie传给后端服务器。这里如果使用是axios,就可以手动设置axios请求的headers字段,代码如下:
在server.js中获取浏览器cookie,并利用window对象存储:

app.use('*', (req, res) => {
  ...
  window.ssr_cookie = req.cookie
  ...
})

在axios中,添加header将cookie塞进去:

axios.create({
  ...
  headers: window.ssr_cookie || {}
  ...
})

这样就可以将浏览器的cookie带给SSR服务器了。

No stacktrace on NavigationDuplicated error错误

该错误本身是由于重复的点击相同的导航组件,会报错NavigationDuplicated,由于SSR渲染会使用hostory模式,所以在第一次进入路由时,会经过多次导航(可以通过给router添加beforeEach钩子可以看到),所以也会报NavigationDuplicated错误,本身这个错误不影响使用,但是如果需要规避,可以采用如下代码,在router.js中添加:

const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

相关的issue地址

同时支持客户端渲染和服务端渲染

既然使用了Vue的SSR渲染,那么首先需要考虑的就是SSR服务的稳定性,所以为了最大程度的保证服务可用,当服务端渲染挂掉时,需要有容错逻辑保证页面可用,所以,原先的客户端渲染相关的构建要保留,即通过直接访问index.html的方式能够正常使用页面,这里直接通过nginx配置路径转发,代码如下:

location /index.html {
     return 301 https://$server_name/;
}

即将原先的通过http://www.abc.com/index.html访问的地址转发到http://www.abc.com/,这样就能够触发采用history模式的vue-router的path="/"的路由,对于客户端访问和服务的访问,分别配置不同的转发,如下:

 # 客户端渲染服务
  location / {
     # 给静态文件添加缓存
     location ~ .*.(js|css|png|jpeg)(.*) {
          valid_referers *.nihaoshijie.com.cn;
          if ($invalid_referer) {
            return 404;
          }
          proxy_pass http://localhost:8080;
          expires  3d;# 3天
      }
      proxy_pass http://localhost:8080; # 静态资源走8080端口
  }

  # ssr服务
  location  = /index_ssr {
     proxy_pass http://localhost:8888; # ssr服务使用8888端口
  }

只保留/index_ssr作为SSR渲染的入口,然后在server.js中,将/index_ssr处理成首页的路径,并添加对SSR渲染的容错逻辑,代码如下:

  if (req.originalUrl === '/index_ssr' || req.originalUrl === '/index_ssr/') {
    context.url = '/'
  }
  ...
  renderer(bundle, manifest).renderToString(context, (err, html) => {
    ...
    if (err) {
      // 发现报错,直接走客户端渲染
      res.redirect('/')
      // 记录错误信息 这部分内容可以上传到日志平台 便于统计
      console.error(`error during render : ${req.url}`)
      console.error(err)
    }
    ...
  })

针对服务端渲染的容错机制,不限于使用上面介绍的方案,也可以自行根据实际场景来解决。

PWA和SSR的集成

由于本项目使用到了PWA技术,这样在集成时需要注意PWA相关的代码和插件只需要在entry-client.js入口的逻辑中添加即可,SSR服务端是不需要配置PWA相关的逻辑,例如之前的OfflinePlugin插件,在vue.config.js做如下配置:

if (TARGET_NODE) {
  plugins.push(new VueSSRServerPlugin())
} else {
  plugins.push(new VueSSRClientPlugin())

  plugins.push(new OfflinePlugin({
      // 要求触发ServiceWorker事件回调
      ServiceWorker: {
        events: true,
        // push事件逻辑写在另外一个文件里面
        entry: './public/sw-push.js'
      },
      // 更更新策略选择全部更新
      updateStrategy: 'all',
      // 除去一些不需要缓存的文件
      excludes: ['**/*.map', '**/*.svg', '**/*.png', '**/*.jpg', '**/sw-push.js', '**/sw-my.js','**/*.json'],

      // 添加index.html的更新
      rewrites (asset) {
        if (asset.indexOf('index.html') > -1) {
          return './index.html'
        }

        return asset
      }
    }))
}

总结

对于Vue的SSR渲染,本身逻辑是相对复杂的,需要同时了解客户端和Node端的技术,并且使用起来对后端服务也是有一定要求的,所以需要具体的使用场景来判断是否使用,作为初学者,笔者建议跟着官方文档来一步一步进行改造,这样能够更加理解其中的含义,如果感兴趣的话也可以了解一下Vue的SSR框架:nuxt.js

上述改造完整项目Github地址。

 

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/197421.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code