服务端渲染和nuxt简单介绍

概述

最近研究了一下服务端渲染，有一些心得，记录下来供之后开发时参考，相信对其余人也有用。

参考资料：

Vue SSR指南

nuxt.js官网

服务端渲染介绍

服务端渲染简单来讲，就是分别对项目用webpack打包2次，一次生成vue-ssr-server-bundle.json，一次生成vue-ssr-client-manifest.json和其它静态文件，最后用node搭一个服务器接收这2个json文件进行组装，并发送给用户。其中有如下几点须要注意：

1.工厂函数

咱们须要对vue, vue-router, vuex用一个工厂函数包裹起来，进行延迟执行。缘由是node server每次会接受不少http请求，而vue却只有一个示例，若是在打包前把实例先初始化的话，之后的每次请求就会发送同一个实例，形成交叉请求状态污染 (cross-request state pollution)。示例以下：

// app.js
const Vue = require('vue')

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

2.服务端渲染的生命周期

在全部vue的生命周期钩子函数中，beforeCreate 和 created 会在服务端渲染的时候被调用，其它生命周期会在客户端执行。

因此咱们在 beforeCreate 和 created 这2个生命周期内不能访问this，也不能访问window，更不能访问组件实例等。通常咱们在 beforeCreate 和 created 中会作的事情有：发送http请求事先填充store，鉴权，发送http请求初始化组件data等。咱们在客户端进行初始化的http请求都须要移动到 mounted 或者 beforeMount 生命周期中。

3.axios

咱们发送http请求的库推荐使用axios。又由于axios不只会用在客户端发送http请求，还会用在服务端发送http请求，因此在给axios设置拦截器的时候须要当心使用和window或者dom相关的方法。

4.HTML结构

由于vue的服务端渲染主要是由vue-server-renderer库完成的，它在解析html标签的时候会有一些坑，就是html结构须要很严格的书写，至少要作到如下2点：

1. 不要漏写结束标签。
2. p标签里面不能使用块级标签，若是非要使用的话，须要把p标签换成div标签。

5.缓存

咱们通常给node server使用 micro-caching 缓存策略：让 node server 把动态内容储存1秒，也就是说不管这一秒有多少请求，node server 只会生成一次动态内容。这个是经过LRU库来实现的。另外还有组件级别的缓存，这里就很少说了。

nuxt.js

1.yarn

虽然nuxt项目能够用npm运行，可是仍然推荐使用yarn来运行此项目，步骤以下：

先检查电脑中是否有homebrew:

$ brew -v

若是有homebrew的话跳过此步，没有的话使用如下命令安装：

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

最后使用homebrew安装yarn:

$ brew install yarn

这里是npm和yarn的对照：

• npm install === yarn
• npm run dev === yarn run dev
• npm init === yarn init
• npm install <package> === yarn add <package>
• npm uninstall <package> === yarn remove <package>
• npm update <package> === yarn upgrade <package>

2.指令

# 安装全部依赖包
$ yarn

# 安装某个依赖包
$ yarn add <package>

# 打开开发环境
$ yarn dev

# 正式环境
$ yarn build
$ yarn start

# 开发环境下重启服务(很重要)
$ 输入rs 再按回车键

# 自动修复eslint错误
$ yarn lint

# 生成可视化依赖图（至关于vue-cli3的vue inspect指令）
$ yarn analyze

3.在开发的时候须要注意以下几点：

1. eslint在一些方面比其它项目更加严格，按报错提示修改就能够了。（这些方面我没有改为和其它项目同样是由于我以为这些习惯很好）
2. 静态资源放在static文件夹里面，svg雪碧图放在assets/sprite/文件夹里面。
3. 文件夹名字不能改。（nuxt.js自己要求）
4. 其它好比pages文件夹里面每一个文件就是一个路由，能够看nuxt.js官方文档。