一.传统的服务端渲染(SSR)

image

1.案例

npm i express art-template

index.js

//客户端服务文件

const express = require('express')

const fs = require('fs')

const template = require('art-template')//服务端模板引擎

const app = express()

app.get('/',(req,res)=>{

// 1.获取页面模板

const templateStr = fs.readFileSync('./index.html','utf-8')

// 2.获取数据

const data = JSON.parse(fs.readFileSync('./data.json','utf-8'))

// 3.渲染：数据+模板 = 最终渲染结果

const html = template.render(templateStr, data)

// 4.把渲染结果发送给客户端

res.send(html)

})

app.listen(3000,()=>console.log('runing...'))

index.html

传统服务端渲染

传统服务端渲染示例

{{title}}

{{ each posts }}

{{ $value.title }}

{{ $value.body }}

{{ /each }}

data.json

{

"posts": [

{

"id": 1,

"title": "肖战-光点1",

"body": "只有自身是个发光体，才会有更多优秀的人靠近"

},

{

"id": 2,

"title": "肖战-光点2",

"body": "只有自身是个发光体，才会有更多优秀的人靠近"

},

{

"id": 3,

"title": "肖战-光点3",

"body": "只有自身是个发光体，才会有更多优秀的人靠近"

},

{

"id": 4,

"title": "肖战-光点4",

"body": "只有自身是个发光体，才会有更多优秀的人靠近"

}

],

"title":"肖战-小飞侠-冲"

}

2. 缺点：

前后端代码完全耦合在一起，不利于开发和维护

前端没有足够发挥空间

服务端压力大

用户体验一般

二.客户端渲染(CSR)

之前服务端渲染的缺点，随着客户端Ajax技术的普及得到了有效的解决，Ajax使得客户端动态获取数据成为可能，因此，服务端渲染的工作来到了客户端。

以Vue.js项目为例系统了解客户端渲染流程。

后端负责处理数据接口

前端负责将接口数据渲染到页面中

但客户端渲染也存在一些明显的不足：

首屏渲染慢：因为客户端渲染至少发起Http请求三次，第一次是请求页面，第二次是请求页面里的JS脚本，第三次是动态数据请求。

不利于SEO：因为客户端渲染的内容都是由JS生成的，而搜索引擎只会请求网络路径的html，不会去将html里的JS脚本再去请求做解析处理，因此搜索引擎获取到的首屏是空的，单页应用SEO几乎为0。

三.现代化的服务端渲染(同构渲染)

image

1. 同构渲染 = 后端渲染 + 前端渲染

基于React、Vue等框架，客户端渲染和服务端渲染的结合

在客户端执行一次，用户实现服务器端渲染(首屏直出)

在客户端再执行一次，从而生成一个SPA应用，用于接管页面交互

核心解决SEO和首屏渲染慢的问题

拥有传统服务端渲染的优点，也有客户端渲染的优点。

2. 如何实现同构渲染?

使用Vue、React等框架的官方解决方案

优点：有助于理解原理

缺点：需要搭建环境

使用第三方解决方案

React生态的Next.js

Vue生态的Nuxt.js

3. 以Vue生态的Nuxt.js为例演示同构渲染应用

▶1.创建一个文件夹，然后进入文件夹执行yarn init生成包管理器

然后执行yarn add nuxt安装Nuxt

在package.json增加scripts脚本命令"dev": "nuxt"

▶2.创建pages文件夹(名字固定叫pages)，在这个文件夹中创建index.vue文件和about.vue文件，nuxt会根据pages路径自动生成路由。

// index.vue

export default {

}

// about.vue

export default {

}

▶3.执行yarn dev运行这个Nuxt项目，打开localhost:3000端口，默认是pages/index.vue页面，然后访问localhost:3000/about访问的是pages/about.vue页面

▶4.在pages/index.vue页面中通过asyncData方法获取json数据，静态的json数据文件是放在static目录下的。Nuxt中提供的钩子函数asyncData()，专门用于获取服务端渲染的数据。axios不要忘了安装：yarn add axios

// pages/index.vue

import axios from 'axios'

export default {

name: 'Home',

components: {},

// Nuxt中提供一个钩子函数`asyncData()`，专门用于获取服务端渲染的数据。

async asyncData () {

const { data } = await axios({

method: 'GET',

// 注意此处的URL要指定当前端口，否则默认会去服务端的80端口去查找。

url: 'http://localhost:3000/data.json'

})

// 这里返回的数据会和data () {} 中的数据合并到一起给页面使用

return data

}

}

static/data.json

{

"list": [

{

"id": 1,

"name": "肖战"

},

{

"id": 2,

"name": "王一博"

},

{

"id": 3,

"name": "马园园"

}

],

"title": "陈情令"

}

▶5.一次请求就拿到了完整页面，Nuxt的服务端渲染方案解决了首屏渲染慢的问题和SEO的问题

image

▶6.Nuxt生成的是SPA单页应用，可以通过增加路由导航看出来，Home和About两个组件切换时页面没有刷新。创建一个文件夹layouts，然后在这个文件夹中创建一个default.vue文件(nuxt中，这个文件会作为所有页面的母版)，这个文件名是固定要求的，不能随意取

export default {

}

4.同构渲染应用的问题

▶1.开发条件有限

✔浏览器特定的代码只能在某些生命周期钩子函数中使用

✔一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行

✔不能再服务端渲染期间操作DOM

✔某些代码操作需要区分运行环境

▶2.涉及构建设置和部署的更多要求

客户端渲染

同构渲染

构建

仅构建客户端应用即可

需要构建两个端

部署

可以部署在任意web服务器中

只能部署在Node.js Server中

▶3.更多的服务器端负载

✔在Node中渲染完整的应用程序，相比仅仅提供静态文件服务器，需要大量占用CPU资源

✔如果应用在高流量环境下使用，需要准备相应的服务器负载

✔需要更多的服务端渲染优化工作处理

5. 服务端渲染使用建议

首屏渲染速度是否真的重要？

是否真的需要SEO？

NuxtJS

代码仓库地址：

一、Nuxt.js是什么

一个基于Vue.js生态的第三方开源服务端渲染应用框架

它可以帮我们轻松的使用Vue.js技术栈构建同构应用

二、Nuxt.js的使用方式

初始化项目

已有的Node.js服务端项目

直接把Nuxt当做一个中间件集成到Node Web Server中

现有的Vue.js项目

非常熟悉Nuxt.js

至少百分之10的代码改动

三、初始化Nuxt.js应用方式

方式一：使用create-nuxt-app

方式二：手动创建

四、Nuxt.js路由

1. 基本路由

pages文件夹下的文件会自动生成路由

2. 路由导航

a标签

它会刷新整个页面，不推荐使用

首页

methods: {

onClick () {

this.$router.push('/')

}

}

3. 动态路由

user/_id.vue，动态路由参数文件名由下划线开头。

export default {

name: 'UserPage'

}

4. 嵌套路由

可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

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