SPA单页面应用
-
优点
- 用户体验好
- 开发效率高
- 渲染性能好
- 可维护性好
缺点
首屏渲染时间长
不利于SEO
通过服务端渲染首屏直出，解决 SPA 应用首屏渲染慢以及不利于SEO问题
通过客户端渲染接管页面内容交互得到更好的用户体验
这种方式通常称为现代化的服务端渲染，也叫同构渲染
这种方式构建的应用称之为服务端渲染应用或者式同构应用
传统服务端渲染
图片.png
//nodejs创建一个服务 将页面模板与数据的渲染结果 发送给客户端 渲染页面
const express = require('express') //模板引擎 npm i express
const fs = require('fs')
const template = require('art-template') //模板引擎 npm i 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.get('/about', (req, res) => {
res.end(fs.readFileSync('./about.html'))
})
app.listen(3000, () => console.log(''server"))
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>传统的服务端渲染</title>
</head>
<body>
<h1>传统的服务端渲染</h1>
<h2>{{ data }}</h2>
</body>
</html>
缺点
- 前后端代码完全耦合在一起，不利于开发和维护
- 前端没有足够发挥空间
- 服务端压力大
- 用户体验一般
客户端渲染
图片.png
缺点
- 首屏渲染慢
页面请求 -> js请求 -> 动态数据请求（所以耗时较长） - 不利于SEO
同构渲染
后端渲染与前端渲染的结合
- 基于 React,Vue 等框架，客户端渲染和服务器端渲染的结合
- 在服务器端执行一次，用于实现服务器端渲染（首屏直出）
- 在客户端再执行一次，用于接管页面交互
- 核心解决SEO和首屏渲染慢的问题
-
拥有传统服务端渲染的优点，也有客户端渲染的优点
图片.png
同构渲染应用的问题
- 开发条件所限
- 浏览器特定的代码只能在某些生命周期钩子函数中使用
- 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
- 不能在服务端渲染期间操作DOM
- 某些代码操作需要区分运行环境
-
涉及构建设置和部署的更多要求
图片.png - 更多的服务器端负载
- 在Node中渲染完整的应用程序，相比仅仅提供静态文件的服务器 需要大量占用CPU资源
- 如果应用在高流量环境下使用，需要准备响应的服务器负载
- 需要更多的服务端渲染优化工作处理
Nuxt.js
- 一个基于 Vue.js 生态的第三方开源服务端渲染应用框架
- 可以轻松的使用Vue.js 技术栈构建同构应用
Nuxt.js使用方式 - 初始项目
- 已有的Node.js服务端项目
- 直接把Nuxt当作一个中间件集成到Node Web Server中
- 现有的Vue.js项目
- 非常熟悉Nuxt.js
- 至少百分之10的代码改动
Nuxt.js 异步数据-asyncData 方法
- 基本用法
- 它会将 asyncData 返回的数据融合组件 data 方法返回数据一并给组件
- 调用时机：服务端渲染期间和客户端路由更新之前
- 注意事项
- 只能在页面组件中使用
- 没有this,因为它是组件初始化之前被调用的
当想要动态页面内容有利于SEO或者是提升首屏渲染速度的时候，就在 asyncData中发请求 拿数据
