服务端渲染ssr
wkxk 前端攻城狮

概述

随着前端技术栈和工具链的迭代成熟,前端工程化、模块化也已成为了当下的主流技术方案,在这波前 端技术浪潮中,涌现了诸如 React、Vue、Angular 等基于客户端渲染的前端框架,这类框架所构建的 单页应用(SPA)具有用户体验好、渲染性能好、可维护性高等优点。但也也有一些很大的缺陷,其中 主要涉及到以下两点:

  • 首屏加载时间过长

  • 与传统服务端渲染直接获取服务端渲染好的 HTML 不同,单页应用使用 JavaScript 在客户端生成 HTML 来呈现内容,用户需要等待客户端 JS 解析执行完成才能看到页面,这就使得首屏加载时间变长,从而 影响用户体验。

  • 不利于 SEO

    • 当搜索引擎爬取网站 HTML 文件时,单页应用的 HTML 没有内容,因为他它需要通过客户端 JavaScript解析执行才能生成网页内容,而目前的主流的搜索引擎对于这一部分内容的抓取还不是很好。

为了解决这两个缺陷,业界借鉴了传统的服务端直出 HTML 方案,提出在服务器端执行前端框架 (React/Vue/Angular)代码生成网页内容,然后将渲染好的网页内容返回给客户端,客户端只需要负责展示就可以了;

当然不仅仅如此,为了获得更好的用户体验,同时会在客户端将来自服务端渲染的内容激活为一个 SPA 应用,也就是说之后的页面内容交互都是通过客户端渲染处理。

Nuxt.js

官网:https://zh.nuxtjs.org/

GitHub 仓库:https://github.com/nuxt/nuxt.js

Nuxt.js 是一个基于 Vue.js 生态开发的一个第三方服务端渲染框架,通过它我们可以轻松构建现代化的服务端渲染应用。

isomorphic web apps(同构应用):isomorphic/universal,基于 react、vue 框架,客户端渲染和服务器端渲染的结合,在服务器端执行一次,用于实现服务器端渲染(首屏直出),在客户端再执行一次,用于接管页面交互,核心解决 SEO 和首屏渲染慢的问题。

  1. 客户端发起请求

  2. 服务端渲染首屏内容 + 生成客户端 SPA 相关资源

  3. 服务端将生成的首屏资源发送给客户端

  4. 客户端直接展示服务端渲染好的首屏内容

  5. 首屏中的 SPA 相关资源执行之后会激活客户端 Vue

  6. 之后客户端所有的交互都由客户端 SPA 处理

优缺点

  • 优点:首屏渲染速度快、有利于 SEO

  • 缺点:

    • 开发成本高。
    • 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同,服务器渲染应用程序,需要处于 Node.js server 运行环境。更多的服务器端负载。在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的
    • server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集),因此如果你预料在高流量环境(high traffic) 下使用,请准备相应的服务器负载,并明智地采用缓存策略

特性

  • 基于 Vue.js

  • Vue、Vue Router、Vuex、Vue SSR

  • 自动代码分层

  • 服务端渲染

  • 强大的路由功能,支持异步数据

  • 静态文件服务

  • ES2015+ 语法支持

  • 打包和压缩 JS 和 CSS

  • HTML 头部标签管理

  • 本地开发支持热加载

  • 集成 ESLint

  • 支持各种样式预处理器: SASS、LESS、 Stylus 等等

  • 支持 HTTP/2 推送

创建项目

  • 使用 create-nuxt-app 脚手架工具
1
2
3
4
5
6
# 脚手架创建项目
yarn create nuxt-app <project-name>
# 进入到项目目录
cd <project-name>
# 启动项目
yarn dev
  • 手动创建
1
2
3
4
5
6
7
8
# 创建示例项目 
mkdir nuxt-app-demo
# 进入示例项目目录中
cd nuxt-app-demo
# 初始化 package.json 文件
yarn init -y
# 安装 nuxt
yarn add nuxt

package.json 文件的scripts中新增:

1
2
3
"scripts": { 
"dev": "nuxt"
},
1
2
# 运行项目 
yarn dev

创建页面

创建 pages 目录:

1
mkdir pages

创建我们的第一个页面 pages/index.vue

1
2
3
<template> 
<h1>Hello world!</h1>
</template>

然后启动项目:

1
yarn dev

现在我们的应用运行在 http://localhost:3000 上运行。

注意:Nuxt.js 会监听 pages 目录中的文件更改,因此在添加新页面时无需重新启动应用程序。

Nuxt 中的基础路由

Nuxt.js 会依据 pages 目录中的所有 *.vue 文件生成应用的路由配置。

假设 pages 的目录结构如下:

1
2
3
4
5
pages/ 
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么,Nuxt.js 自动生成的路由配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
router: { 
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}

路由导航

  • a 标签

  • <nuxt-link> 组件

  • 编程式导航

动态路由

在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

以下目录结构:

1
2
3
4
5
6
7
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Nuxt.js 生成对应的路由配置表为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
router: { 
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}

你会发现名称为 users-id 的路由路径带有:id?参数,表示该路由是可选的。如果你想将它设置为必选的路由,需要在 users/_id目录内创建一个 index.vue 文件。

嵌套路由

  • 你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

  • 创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。

Warning: 别忘了在父组件( .vue 文件) 内增加用于显示子视图内容。

假设文件结构如:

1
2
3
4
5
pages/ 
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

Nuxt.js 自动生成的路由配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
router: { 
routes: [
{
path: '/users',
component: 'pages/users.vue',
children: [
{
path: '',
component: 'pages/users/index.vue',
name: 'users'
},
{
path: ':id',
component: 'pages/users/_id.vue',
name: 'users-id'
}
]
}
]
}

路由配置

视图

异步数据

  • asyncData 方法
    • Nuxt.js 扩展了 Vue.js,增加了一个叫asyncData的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。

生命周期

Nuxt 常见问题

Nuxt 官方示例

  • Post title:服务端渲染ssr
  • Post author:wkxk
  • Create time:2021-04-25 14:16:18
  • Post link:http://www.iwkxk.com/2021/04/25/服务端渲染ssr/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments