1.Nuxt.js 是什么？

Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的UI渲染。
其目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

2. Nuxt.js 框架是如何运作的？

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

  • Vue 2
  • Vue-Router
  • Vuex (当配置了 Vuex 状态树配置项 时才会引入)
  • Vue 服务器端渲染 (排除使用 mode: ‘spa’)
  • Vue-Meta

3.特性

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

4.nuxt运行流程

nuxt中用axios nuxt作用_服务端

5.服务端渲染(通过SSR)

5.1 何为服务端渲染

简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序

没使用服务渲染，当请求user页面时，返回的body里为空，之后执行js将html结构注入到body里，结合css显示出来,如下图所示；

nuxt中用axios nuxt作用_服务端_02

使用服务端渲染，当请求user页面时，返回的body里已经有了首屏的html结构，之后结合css显示出来

nuxt中用axios nuxt作用_客户端_03

5.2 使用SSR的利弊

5.2.1 SSR的优势

  • 1.更利于SEO
    不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。
  • 2.更利于首屏渲染
    首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。

5.2.2 SSR的局限

  • 1.服务端压力较大
    本来是通过客户端完成渲染，现在统一到服务端node服务去做。尤其是高并发访问的情况，会大量占用服务端CPU资源；
  • 2.开发条件受限
    在服务端渲染中，只会执行到componentDidMount之前的生命周期钩子，因此项目引用的第三方的库也不可用其它生命周期钩子，这对引用库的选择产生了很大的限制；

5.3 时间耗时比较

  • 5.3.1 数据请求
    由服务端请求首屏数据，而不是客户端请求首屏数据，这是“快”的一个主要原因。服务端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差。 下图为服务端渲染的数据请求路线和客户端渲染的数据请求路线图

nuxt中用axios nuxt作用_vue_04

  • 5.3.2 html渲染
    服务端渲染是先向后端服务器请求数据，然后生成完整首屏html返回给浏览器；而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。就是服务端渲染不需要等待js代码下载完成并请求数据，就可以返回一个已有完整数据的首屏页面。

使用Nuxt.js作为框架来处理项目的所有UI呈现。
启动时nuxt，它将启动具有热更新加载的开发服务器，并且Vue 服务器端渲染配置为自动为服务器呈现应用程序。