NUXT--基于Vue的SSR

NUXT–基于Vue的SSR

前言

首先来说说SSR，什么是SSR？SSR是最近挺火的一个词，意为 Server Side Rendering（服务端渲染）即服务端返回完整的HTML页面浏览器，包括数据信息。那这和Vue有啥不同呢？总所周知，Vue是为客户端渲染（*注：*服务端只返回数据给浏览器，页面在前端静态服务器）推出的框架，前后端分离的模式下，客户端渲染为主流。那么，我们为什么还要服务端渲染呢？让我们来一一比较服务端渲染和客户端的优缺点你就知道了。

服务端渲染

优点：返回完整的页面，即首屏渲染时间比较快，对网速一般的用户体验较好。

**缺点：**对服务器资源压力较大，对于高并发请求难以应付。

客户端端渲染

优点：服务器只返回数据，渲染由浏览器完成。页面切换快，高并发情况下，服务器的压力没那么大。

**缺点：**首屏渲染可能要经历较长白屏时间（当然只是相对），SEO搜索引擎优化效果不好，这对需要流量的博客网站等简直致命。

所以 SSR适用场景：

1. 对SEO要求较高的网站，比较需要流量的网站如博客网站。

2. 为优化用户体验，同时服务器资源压力不大。

3. 客户端网络较慢，JS引擎较老。

NUXT是什么？

Nuxt.js的官方介绍：

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

Nuxt是服务器呈现的应用程序框架，在node.js上进一步封装。让开发者专注于UI的渲染。简而言之，Nuxt就是Vue的SSR版本。Vue官方给出Nuxt工作原理的图片：

具体的流程如下图：

简单讲，当你访问NUXT构建的页面时会发生如下操作：

1. 当用户访问应用程序, 如果 store 中定义了 nuxtServerInit action，Nuxt.js 将调用它更新 store。
2. 将加载即将访问页面所依赖的任何中间件。Nuxt 首先从 nuxt.config.js 这个文件中，加载全局依赖的中间件，之后检测每个相应页面对应的布局文件 ，最后，检测布局文件下子组件依赖的中间件。以上是中间件的加载顺序。
3. 如果要访问的路由是一个动态路由, 且有一个相应的 validate() 方法路由的validate 方法，讲进行路由校验。
4. Nuxt.js 调用 asyncData() 和 fetch() 方法，在渲染页面之前加载异步数据。asyncData() 方法用于异步获取数据，并将 fetch 回来的数据，在服务端渲染到页面。 用 fetch() 方法取回的将数据在渲染页面之前填入store。
5. 最后一步, 将所有数据渲染到页面。

NUXT如何渲染？

在nuxt/lib/core的源码目录下找到render.js这个文件，这也是渲染的逻辑所在。其中有三个重要的方法：render(), renderRoute(), renderAndGetWindow()。

上图解释了NUXT如何处理客户端渲染和服务端渲染。相关代码如下：

// Call renderToString from the bundleRenderer and generate the HTML (will update the context as well)

    let APP = await this.bundleRenderer.renderToString(context)

    if (!context.nuxt.serverRendered) {
      APP = '
'
    }

在**render()方法在处理完一系列的路径问题后,会调用renderRoute()方法,获取响应所需内容并完成响应。其中renderRoute()方法会判断当前响应是否应执行服务端渲染。如果是,则调用vue提供的bundleRenderer()方法,把html内容渲染完毕以后再整体输出;如果不是,则直接输出一个

字符串,交由客户端渲染。最后,通过renderAndGetWindow()**来检查输出的html是否存在问题,然后发出通知,表明html可用。

NUXT项目的简单概述

• 对于路由pages，NUXT根据pages目录结构生成路由配置，并且实时监听。具体生成规则见官方文档。
• 对于layout布局，pages默认走默认布局，NUXT也可以自定义布局，分层页面布局。layout与页面的具体内容的插口即
• 中间件执行的顺序：nuxt.config.js -> 匹配布局 -> 匹配页面

NUXT能做什么？

1. 我们无需为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行
2. 无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装
3. 内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件

步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装
3. 内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件