一.传统的服务端渲染（SSR）
image.png
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>传统服务端渲染</title>
</head>
<body>
<h1>传统服务端渲染示例</h1>
<h2>{{title}}</h2>
<ul>
{{ each posts }}
<li>
<span>{{ $value.title }}</span>
<p>{{ $value.body }}</p>
</li>
{{ /each }}
</ul>
</body>
</html>
- 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。
三.现代化的服务端渲染（同构渲染）
现代化服务端渲染
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
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
// about.vue
<template>
<div>
<h1>About</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
▶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
<template>
<div id="app">
<h2>{{ title }}</h2>
<ul>
<li
v-for="item in list"
:key="item.id"
>{{ item.name }}</li>
</ul>
</div>
</template>
<script>
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
}
}
</script>
<style scoped>
</style>
static/data.json
{
"list": [
{
"id": 1,
"name": "肖战"
},
{
"id": 2,
"name": "王一博"
},
{
"id": 3,
"name": "马园园"
}
],
"title": "陈情令"
}
▶5.一次请求就拿到了完整页面，Nuxt的服务端渲染方案解决了首屏渲染慢的问题和SEO的问题
image.png
▶6.Nuxt生成的是SPA单页应用，可以通过增加路由导航看出来，Home和About两个组件切换时页面没有刷新。创建一个文件夹layouts，然后在这个文件夹中创建一个default.vue文件(nuxt中，这个文件会作为所有页面的母版)，这个文件名是固定要求的，不能随意取
<template>
<div>
<!-- 路由出口 -->
<ul>
<li>
<!-- 类似于 router-link，用于单页面应用导航 -->
<nuxt-link to="/">Home</nuxt-link>
</li>
<li>
<!-- 类似于 router-link，用于单页面应用导航 -->
<nuxt-link to="/about">About</nuxt-link>
</li>
</ul>
<!-- 子页面出口 -->
<nuxt />
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
4.同构渲染应用的问题
▶1.开发条件有限
- ✔浏览器特定的代码只能在某些生命周期钩子函数中使用
- ✔一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
- ✔不能再服务端渲染期间操作DOM
- ✔某些代码操作需要区分运行环境
▶2.涉及构建设置和部署的更多要求
| 客户端渲染 | 同构渲染 | |
|---|---|---|
| 构建 | 仅构建客户端应用即可 | 需要构建两个端 |
| 部署 | 可以部署在任意web服务器中 | 只能部署在Node.js Server中 |
▶3.更多的服务器端负载
- ✔在Node中渲染完整的应用程序，相比仅仅提供静态文件服务器，需要大量占用CPU资源
- ✔如果应用在高流量环境下使用，需要准备相应的服务器负载
- ✔需要更多的服务端渲染优化工作处理
5. 服务端渲染使用建议
- 首屏渲染速度是否真的重要？
- 是否真的需要SEO？
NuxtJS
代码仓库地址：
一、Nuxt.js是什么
- 一个基于Vue.js生态的第三方开源服务端渲染应用框架
- 它可以帮我们轻松的使用Vue.js技术栈构建同构应用
- 官网：https://zh.nuxtjs.org/
- Github仓库：https://github.com/nuxt/nuxt.js
二、Nuxt.js的使用方式
- 初始化项目
- 已有的Node.js服务端项目
- 直接把Nuxt当做一个中间件集成到Node Web Server中
- 现有的Vue.js项目
- 非常熟悉Nuxt.js
- 至少百分之10的代码改动
三、初始化Nuxt.js应用方式
官方文档：https://zh.nuxtjs.org/guide/installation
- 方式一：使用create-nuxt-app
- 方式二：手动创建
四、Nuxt.js路由
1. 基本路由
pages文件夹下的文件会自动生成路由
2. 路由导航
- a标签
- 它会刷新整个页面，不推荐使用
<a href="/">首页</a>
- nuxt-link组件
- https://router.vuejs.org/zh/api/#router-link-props
<router-link to="/">首页</router-link>
- 编程式导航
- https://router.vuejs.org/zh/guide/essentials/navigation.html
<button @click="onClick">首页</button>
methods: {
onClick () {
this.$router.push('/')
}
}
3. 动态路由
- Vue Router动态路由匹配
- Nuxt
user/_id.vue，动态路由参数文件名由下划线开头。
<template>
<div>
<h1>User page</h1>
<p>{{$route.params.id}}</p>
</div>
</template>
<script>
export default {
name: 'UserPage'
}
</script>
<style scoped>
</style>
4. 嵌套路由
- Vue Router 嵌套路由
- Nuxt.js嵌套路由
可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。
网友评论