9.1 简介

2016 年 10 月 25 日，zeit.co背后的团队对外发布了Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于Vue.js的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。

Nuxt.js 是什么？

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

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

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

除此之外，我们还提供了一种命令叫：nuxt generate，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能，是向开发集成各种微服务（microservices）的 Web 应用迈开的新一步。

作为框架，Nuxt.js 为客户端/服务端这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

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

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

• Vue 2
• Vue-Router
• Vuex(当配置了Vuex 状态树配置项时才会引入)
• Vue-Meta

压缩并 gzip 后，总代码大小为：28kb（如果使用了 Vuex 特性的话为 31kb）。

另外，Nuxt.js 使用Webpack和vue-loader、babel-loader来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

特性

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

流程图

下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过<nuxt-link>切换路由渲染页面）的流程：

服务端渲染

你可以使用 Nuxt.js 作为你项目的UI渲染框架。

当运行nuxt命令时，会启动一个支持热加载和服务端渲染（基于Vue.js的vue-server-renderer模块）的开发服务器。

可以查看 Nuxt.js 提供的各种命令以了解更多的信息。

如果你的项目有自己的Web服务器（例如用 Express.js 启动的Web服务），你仍然可以将 Nuxt.js 当作是中间件来使用，负责UI渲染部分的功能。在开发通用的Web应用过程中，Nuxt.js 是可插拔的，没有太多的限制，可通过开发编码中使用Nuxt.js了解更多的信息。

静态化

支持 Vue.js 应用的静态化算是 Nuxt.js 的一个创新点，通过nuxt generate命令实现。

该命令依据应用的路由配置将每一个路由静态化成为对应的HTML文件。

例子：

-| pages/
----| about.vue
----| index.vue

静态化后变成：

-| dist/
----| about/
------| index.html
----| index.html

静态化可以让你在任何一个静态站点服务商托管你的Web应用。

Nuxt.js 的官网就是一个绝佳的例子, 它静态化后托管于GitHub Pages：

• 源码
• 静态化后的文件

在每次更新文档代码的时候，为了避免手工执行nuxt generate命令生成静态文件，我们可以在每次提交代码的时候调用一个AWS Lambda函数来做以下的事情：

1. 拷贝nuxtjs.org 源码
2. 使用npm install命令安装依赖
3. 运行nuxt generate
4. 将生成的dist目录提交至gh-pages分支

我们现在就有了一个无服务端的自动静态化的Web应用:)

我们进一步考虑下电商应用的场景，利用nuxt generate，是不是可以将应用静态化后部署在CDN服务器，每当一个商品的库存发生变化时，就重新静态化下，更新下商品的库存。但是如果用户访问的时候恰巧更新了呢？我们可以通过调用电商的API，保证用户访问的是最新的数据。这样相对于传统的电商应用来说，这种静态化的方案可以大大节省服务器的资源。