第一章 Nuxt.js 简介
需求分析
- 采用 vue.js 开发的应用系统SEO不友好，需要解决SEO的问题
- 比如：新闻门户、博客系统有SEO的需求，希望被搜索引擎收录，百度排名靠前等。
了解搜索引擎优化 SEO
利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
采用什么技术可以利于 SEO 呢？下面要先理解服务端渲染和客户端渲染
服务端渲染和客户端渲染（SSR）
什么是客户端渲染
- 浏览器（客户端）通过 AJAX 向服务端(java servlet)发送 http请求数据接口。
- 服务端将获取的接口数据封装成 JSON ，响应给浏览器。
- 浏览器拿到JSON就进行渲染html页面，生成DOM元素，然后将页面展示给用户。
客户端渲染特点：
- 服务端只响应数据，不生成 html 页面
- 浏览器（客户端）负责发送请求获取服务端的数据，然后渲染成 html 页面。
什么是服务端渲染（SSR）
- 浏览器（客户端）向服务端(java servlet)发送 http请求数据接口。
- 服务端 （servlet ）会生成html页面，响应给浏览器。
- 浏览器直接将接收到html页面进行展示。
服务端渲染特点： - 服务端只响应数据，不生成 html 页面
- 浏览器（客户端）负责发送请求获取服务端的数据，然后渲染成 html 页面。
为什么使用服务器端渲染（SSR）
与传统的SPA（单页面应用程序）相比，服务端渲染的优势主要有哪些：
- 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
- 更快的内容到达时间（首屏加载更快）因为服务端只需要返回渲染好的HTML，这部分代码量很小的，所以
用户体验更好。
权衡之处：
- 开发成本比较高，比如某些声明周期钩子函数（如beforeCreate、created）能同时运行在服务端和
客户端，因此第三方库要做特殊处理，才能在服务器渲染应用程序中运行。 - 由于服务端渲染要用Nodejs做中间层，所以部署项目时，需要处于Node.js server运行环境。在高流量环境
下，还要做好服务器负载和缓存策略。
Vue.js 如何实现 SSR
- 基于官方Vue SSR指南文档的官方方案，官方方案具有更直接的控制应用程序的结构，更深入底层，更加灵活，同时在使用官方方案的过程中，也会对Vue SSR有更加深入的了解。
- vue.js 通用应用框架 NUXT ， NUXT 提供了平滑的开箱即用的体验，它建立在同等的 Vue.js 技术栈之上，但抽象出很多模板，并提供了一些额外的功能，例如静态站点生成。通过NUXT可以根据约定的规则，快速的实现Vue SSR。
什么是 Nuxt.js
- Nuxt.js是一个基于Vue.js的通用应用框架
- 通过对 客户端/服务端 基础框架的抽象组织，Nuxt.js主要关注的是应用的UI渲染
- Nuxt.js的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础代码结构
- 作为框架Nuxt.js为 客户端/服务端 这种典型的应用架构模式提供了许多有用的新特性
为什么要使用 Nuxt.js
主要是为了实现服务端的渲染（SSR），利用Nuxt.js的服务端渲染来解决 Vue 项目的 SEO
Nuxt.js 工作原理
- 浏览器（客户端）发送 http 请求到 Node.js 服务端
- 部署在 Node.js 的应用 Nuxt.js 接收到浏览器请求，会去请求后台接口服务端
- 后台接口服务端会响应 JSON 数据，Nuxt.js 获取数据后进行服务端渲染成 html 。
- 然后 Nuxt.js 将 html 页面响应给浏览器。
- 浏览器直接将接收到html页面进行展示
Nuxt.js 使用了 vue.js + webpack + babel 三大技术架构，集成了 Vue.js 中以下组件/框架，用于开发完整而强大的Web 应用：
- Vue 2
- Vue-Router
- Vuex (当配置了 Vuex 状态树配置项 时才会引入)
- Vue 服务器端渲染 (排除使用 mode: 'spa' )
- Vue-Meta
压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。
另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。
Nuxt 生命周期流程图分析
image.png
