概述
SPA 单页面应用
- 优点
- 用户体验好
- 开发效率高
- 渲染性能好
- 可维护性好
- 缺点
- 首屏渲染时间长
- 不利于 SEO
什么是渲染
- 渲染:把【数据】+ 【模板】 拼接到一起
传统的服务端渲染
- 代码展示
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> </head> <body> <h2>{{ title }}</h2> {{ each posts }} <ul> <li>{{ $value.title }}</li> </ul> {{ /each }} </body> </html>
{ "posts":[ { "id":1, "title":"拉钩教育1", "body":"222222" }, { "id":2, "title":"拉钩教育2", "body":"333333" } ], "title":"拉钩教育1" }
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('running...'))
- 缺点(随着网页越来越复杂,存在很多不足)
- 前后端代码完全耦合在一起,不利于开发和维护
- 前端没有足够发挥空间
- 服务端压力大
- 用户体验一般
客户端激活为 SPA(CSR)
- 优点
- 【前端】更为独立,不在受制于【后端】
- 服务端的压力减小,数据渲染放在客户端
- 用户体验好
- 缺点
- 首屏渲染慢
- 传统的服务端渲染是页面直出,返回来的直接是结果,不用再执行 js和发请求
- 客户端渲染最起码要经历三次的 http 请求周期,死一次是页面的请求,第二次是js的请求,第三次是动态数据请求
- 不利于 SEO
- 传统服务端的内容会全部返回
- 客户端渲染的页面不会解析 js,没内容
- 首屏渲染慢
// 代码测试
app.listen(3000, () => console.log('running...'))
// 搜素引擎是怎么获取网页内容的
const http = require('http')
// 通过程序获取指定的网页内容
http.get('http://localhost:3000/', res =>{
let data = ''
res.on('data', chunk => {
data += chunk
})
res.on('end', () => {
console.log(data)
})
})
同构应用 = 后端渲染 + 前端渲染(现代化的服务端渲染)
- 通过服务端渲染首屏直出,解决 SPA 应用首屏渲染慢以及不利于SEO问题
- 通过客户端渲染接管页面内容交互得到更好的用户体验
- 这种方式通常称之为现代化的服务端渲染,也叫同构渲染
- 拥有传统服务端渲染的优点,也有客户端渲染的优点
如何实现同构渲染
- 使用 Vue、 React 等框架的官方解决方案
- 优点:有助于理解原理
- 缺点:需要搭建环境,比较麻烦
- 使用第三方解决方案
- React 生态的 Next.js
- Vue 生态的 Nuxt.js
通过 Nuxt 体验同构渲染
同构渲染上手操作:
- 创建 pages-demo 目录
- npm init 初始化项目
- npm install 安装依赖,安装 axios 和 nuxt
- 修改 packjson.json 中的 scripts 属性 "dev": "nuxt"
- 启动项目 npm run dev, 打开 http://localhost:3000/
- 创建 page 目录,可以在里面新建 index.vue
- 新建 layouts 文件夹,新建 default.vue 这是路由的入口 (名字是固定的)
同构渲染应用的问题
- 开发条件所限
- 浏览器特定的代码只能在某些生命周期钩子函数中使用
- 一些外部扩展库可能需要特殊处理才能在服务端渲染中应用中运行
- 不能在服务端渲染器件操作DOM
- 某些代码操作需要区分运行环境
- 涉及构建设置和部署的更多要求
- 更多的服务器端负载
- 在 Node 中渲染完整的应用程序,相比仅仅提供静态文件的服务器需要大量占用 CPU 资源
- 如果应用在高流量环境下使用,需要准备相应的服务器负载
- 需要更多的服务端渲染优化工作处理
服务端渲染使用建议
- 首屏渲染速度是否真的重要?
- 是否真的需求 SEO?