关于SSR的文章网上很多,一开始看得我云里雾里。然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清晰明了的很少。所以想写篇文章学习下SSR,希望能够帮助大家快速理解Vue SSR。
什么是SSR?
SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传给浏览器。 优点:
- SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js,SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。
- 更快内容到达时间 传统的SPA应用是将bundle.js从服务器获取,然后在客户端解析并挂载到dom。而SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。
可以从下面两张图来看,第一张图是SSR生成的HTML页面,第二种是传统SPA生成的HTML页面。
SSR
SPA
Nuxt.js
我看了官方 SSR 的介绍,也看了 Nuxt.js 的文档。本质上来说 SSR 是node后端的操作行为,作为只想好好写前端代码的我,不想太折腾。而 Nuxt.js 非常完美地整合了 SSR 的功能。让我们可以开箱即用~官方也推荐使用 Nuxt.js 来搭建 SSR 项目。
好处
我觉得 Nuxt.js 相比自己写 SSR 有几点好处。
- 无需配置Webpack:我一开始还在找Webpack配置呢,看了文档知道nuxt都帮我们封装好了。如需修改Webpack配置只需修改nuxt.config.js 文件。
- 无需node知识:只要你会写vue前端,你就可以写出SSR。无需知道SSR和node、express的配置方法(不过现在的前端多少都会点node知识~)。
- 整合了vue全家桶,直接可用。方便程度不亚于 vue-cli:安装Nuxt——写组件——编译并启动服务———看效果。就这么简单。
- 配置简单,文档友好:认真看下 Nuxt.js 文档就会发现涵盖的内容并不多,而功能很全,非常适合入手。
安装
安装方法在此。很简单,生成模板,然后npm安装依赖,最后再运行。
简单搬运下步骤吧。
// vue-cli 创建nuxt模板项目 $ vue init nuxt-community/starter-template <project-name> // 安装依赖项 $ cd <project-name> $ npm install // 编译并启动服务 $ npm run dev // 打开 http://localhost:3000
安装遇到的问题:
由于 Nuxt.js 中使用了 async...await 语法,而低版本的 node 不支持这个语法,所以必须升级 node 到 7.0 版本之上~