我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第4篇文章,点击查看活动详情
关于 Nuxt.js
2016 年 10 月 25 日,zeit.co 背后的团队对外发布了 Next.js ,一个 React 的服务端渲染应用框架。几小时后,与 Next.js 异曲同工,一个基于 Vue.js 的服务端渲染应用框架应运而生,我们称之为:Nuxt.js。
Nuxt.js 是什么?
Nuxt.js
是一个 基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js
主要关注的是应用的 UI 渲染 。
Nuxt.js 预设了利用 Vue.js 开发 服务端渲染 的应用所需要的各种配置(在 Nuxt 之前大多 Vue 项目的 SSR 解决方案是 vue-server-renderer ,需要做很多工作)。
作为框架,Nuxt.js 为 客户端/服务端
这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。
通过 SSR 应用和 SPA 应用有什么不同
首先,我们来了解两个概念:客户端渲染(CSR)和服务端渲染(SSR)。
客户端渲染 CSR
从图中可以看到,用户打开一个链接时,浏览器向 Web 服务器(通常是 nginx)请求对应的资源,请求到之后,浏览器会去解析 HTML,下载对应的资源(CSS、JS等),对于 Vue 来说,接收到的 HTML 一般就是个 只有根节点的容器 ,真正的内容需要解析运行 js 脚本才能渲染出来。(需要额外的向接口服务器请求数据,最终的页面才是完整的)
我们可以发现,HTML 最终是在客户端进行“组装”,然后才呈现给用户的。
服务端渲染 SSR
从图中可以看到,用户打开一个链接时,浏览器向 Nuxt 应用的服务器请求对应的资源,从浏览器的角度来看,最终响应的 HTML 文件是“完整”的。而 Nuxt 应用的服务器接手了“拼接”的过程。
SSR 的优点
以上就是 CSR 和 SSR 的区别,那么我们为什么要使用 SSR 呢?
我们或多或少都听过 Vue 写的 SPA 应用 SEO 不太好,为啥不好呢?实际上我们去搜索引擎搜一个问题时,搜索引擎会去“爬取”所有相关的内容,然后对内容进行排序,而爬虫爬取的是 HTML,我们之前说过,SPA 应用服务器响应的一般是只有根节点的容器,里面的内容在完成数据填充后才有,爬虫爬不到东西,自然不会优先显示你的网页,而通过 SSR 响应的 HTML 是 完整的 ,很 利于爬虫的采集。
除此之外,由于 SSR 请求返回的 HTML 是完整的,我们无需发起别的接口请求,因此 首屏渲染 会比 CSR 快上许多。
应用
那么 SSR 什么时候该用呢?
首先应用如果比较注重 流量 的,推荐使用 SSR,比如 博客、论坛、官网 等,流量就是命脉。
像管理后台等 B 端网站,一般是没有必要使用服务端渲染的。
创建一个 Nuxt 应用
Nuxt.js
的团队专门做了一个脚手架,来方便我们快速启动一个 nuxt
项目。由于 Nuxt.js
在 node
之上,所以我们首先要确保 node
环境已经安装好。
安装好后,我们开始使用提供的命令来创建脚手架。
首先,win + r
输入 cmd
打开终端,然后开始创建我们的 Nuxt
项目,相关命令如下:
npx create-nuxt-app <项目名>
创建项目的时候,脚手架会询问我们 Server
用的框架、是否使用 lint
以及 css
预处理语言等问题,我们按需选择就好了。
需要注意的是,如果我们需要创建的是一个服务端渲染的应用,那么在 Nuxt
模式的选择中,我们应该选择 Universal
而不是 SPA
。
接下来我们进入到项目中。
cd <project-name>
试试启动项目:
npm run dev
默认的端口是 3000
,不出意外我们打开 3000
端口可以看到应用已经启动了。
注意:Nuxt.js 会监听
pages
目录中的文件更改,因此在添加新页面时无需重新启动应用程序。
至此,一个简单的 Nuxt 应用就成功启动啦。