一、概述
- SPA 单页面应用优点
- 用户体验好
- 开发效率高
- 渲染性能好
- 可维护性好
- SPA单页面应用缺点
- 首屏渲染时间长
- 不利于SEO
-
借鉴了传统的服务端渲染
image.png -
客户端激活为SPA
image.png - 同构应用
- 通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO优化的问题
- 通过客户端渲染接管页面内容交互得到更好的用户体验
- 这种方式通常称之为现代化的服务端渲染，也叫同构渲染
二、什么是渲染
渲染：把【数据】+【模板】拼接到一起
本质：字符串的解析替换
image.png
三、传统的服务端渲染
image.png
//基于node包，快速创建web服务
npm i express
// 第三方模板引擎包，可以实现渲染
npm i art-template
四、客户端渲染
image.png
五、为什么客户端首屏渲染慢
- 因为要加载解析js
六、为什么客户端渲染不利于SEO
- 因为搜索引擎获取不到页面中的内容 只有index.html
七、同构渲染
客户端渲染 + 服务端渲染 = 同构渲染
- 基于React、Vue等框架，客户端渲染和服务端渲染的结合
- 在服务端执行一次，用于实现服务端渲染（首屏直出）
- 在客户端再执行一次，用于接管页面交互
- 核心解决SEO和首屏接载慢的问题
-
拥有传统服务端渲染的优点，也有客户端渲染的优点
image.png - 如何实现同构渲染
- 使用Vue、React等框架的官方解决方案
- 优点：有助于激烈原理
- 缺点：需要搭建环境，比较麻烦
- 使用第三方解决方案
- React生态的Next.js
- Vue生态的Nuxt.js
- 使用Vue、React等框架的官方解决方案
八、同构渲染的问题
- 开发条件所限
- 浏览器特定的代码只能在某些生命周期钩子函数中使用；
- 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
- 不能再服务端渲染期间操作DOM
- 。。。
- 某些代码操作需要区分巡行环境
-
涉及构建设置和部署的更多要求
image.png - 更多的服务端负载
- 在Node中渲染完整的应用程序，相比仅仅提供静态文件的服务器需要占用大量的CPU资源
- 如果应用在高流量环境下使用，需要准备相应的服务器负载
- 需要更多的服务端渲染优化工作处理
- 服务端渲染使用建议
- 首屏渲染速度是否真的重要
- 是否真的需要SEO？
