SPA and SSR 优缺点以及应用

108 阅读10分钟

§ SPA (Single Page Application)

即单页面应用,一般也称为 客户端渲染 (CSR)

1. SPA的优缺点:

优点:

用户体验、快速的页面切换: SPA提供了平滑的过渡和快速的响应,因为它们避免了页面之间的加载延迟

高性能: 按需加载数据,减少了初始加载时间和带宽消耗

动态更新: 用户可以在不中断其活动的情况下接收事实更新

开发效率高: 可以利用现代前端框架 (如React、Vue或Angular) 的特性,简化开发流程

缺点:

SEO (搜索引擎优化) 不友好: 传统的SPA可能会影响SEO,因为搜索引擎爬虫可能无法有效地解析JavaScript渲染的内容。不过,现代SPA框架提供了SSR和与渲染等解决方案来缓解这一问题

首屏加载慢: 虽然SPA可以减少页面加载次数,但是初始加载时间可能需要下载大量JavaScript和依赖库,这可能会增加首次加载的时间

开发复杂度: 高在SPA通常需要更复杂的前端架构和状态管理,增加了开发和维护的难度

资源消耗: 客户端需要处理所有渲染工作,对于计算能力有限的设备,这可能是一个问题

2. 渲染过程

image.png

初次加载:

当用户访问SPA时,服务器会发送一个包含HTML、CSS和JavaScript的初始页面,这个页面包含了应用的主要结构和样式,但大部分动态和功能有客户端JavaScript来处理

客户端渲染:

JavaScript接管了后续的内容渲染。当用户与应用交互时 (例如点击链接、提交表单、滚动页面等) ,JavaScript框架 (如Vue、React或Angular) 会根据新的数据更新DOM (Document Object Model) 树,从而改变页面的视觉呈现,而不是请求一个新的HTML页面

路由管理:

SPA通常使用前端路由来处理页面间的导航。当用户尝试访问不同的“页面”时,JavaScript会拦截这些请求,更新URL的哈希值或者使用HTML5的History API来改变浏览器地址栏的URL,但不会出发完整的页面刷新。页面的更新由前端代码根据新的路由状态来处理

异步数据加载:

在SPA中,数据通常是通过AJAX (Asynchronous JavaScript and XML) 或Fetch API异步加载的。当需要新的数据时,JavaScript会向服务器发送请求,获取数据后更新页面上的内容。这种方式可以让页面保持响应状态,即使是在加载数据的过程中

状态管理:

由于SPA的所有内容都在一个页面中更新,因此需要有效的状态管理策略来跟踪和维护应用的数据和状态。这通常涉及到使用状态管理库如Vuex(Vue.js)、Redux(React)或NgRx(Angular)

§ SSR (Server Side Render)

即 服务端渲染,一般也称为 多页面应用 (Multiple Page Application),简称MPA

1.SSR的优缺点:

优点:

SEO友好: 搜索引擎更容易抓取和索引页面内容,因为HTML中包含完整的内容

首屏加载速度快: 用户首次访问时,浏览器几乎立即显示完整页面,提高用户体验

数据流控制: 服务器可以根据需要逐步发送数据,减少初始数据传输量

缺点:

服务器压力大: 服务器需要处理更多的渲染任务,尤其是在流量大的情况下

开发复杂度: 高在需要同事考虑服务器端和客户端的渲染逻辑

重复加载: 每次请求都需要重新渲染页面,可能会导致资源浪费

2.渲染过程

image.png

路由匹配:

当客户端发起请求时,服务器会根据请求的URL进行路由匹配,确定要渲染的具体页面。这是为了决定哪个组件或视图应该被渲染。

数据获取:

在确定了渲染的页面后,服务器会从数据库或其他数据源获取页面所需的数据。这可能包括动态内容、用户特定数据或任何需要实时获取的信息。

数据注入:

将获取到的数据注入到页面的模板中。模板通常使用某种模板引擎 (如Handlebars、EJS、Pug等) 来定义页面的结构和数据填充位置。在现代前端框架中,如Vue或React,这可能涉及将数据传递给组件。

模板渲染:

使用模板引擎将注入了数据的模板进行渲染,生成最终的HTML内容。在框架中,这可能意味着将组件转换成静态HTML字符串。

HTML返回:

将生成的HTML内容作为响应返回给客户端。浏览器收到HTML后,会开始解析并呈现页面。

客户端初始化:

对于使用现在前端框架的SSR应用,服务器返回的HTML中可能包含了客户端运行所需的JavaScript文件。浏览器加载并执行这些脚本后,会重新挂载组件状态,使得页面具有交互性。这意味着在客户端再次执行框架的生命周期钩子,如React中的componentDidMount或Vue中的mounted钩子,从而恢复页面的动态功能。

后续请求处理:

随后的用户交互或页面跳转可能直接由客户端处理,使用SPA模式,或者继续通过服务器端渲染来更新页面,这取决于应用的设计和配置。

§ 技术选型

在创建新项目时决定使用SPA还是SSR,通常取决于多个因素,包括但不限于项目的需求、团队的技术栈、性能考虑、SEO需求、用户体验目标等

1. SPA与SSR的选择依据 (两者的区别)

1.性能与SEO

如果项目需要良好的SEO效果,SSR可能是更好的选择,因为它可以生成完整的HTML页面拱搜索引擎抓取

如果性能优先,SPA由于减少了服务器的负担和网络请求次数,可能提供更快的后续页面加载速度

用户体验

SPA提供了类似原生应用的流畅体验,适合需要实时更新内容的应用

SSR更适合那些需要快速展示内容给用户的页面,如新闻站点或博客

开发与维护成本

SSR通常需要更复杂的后端集成和更高的服务器资源消耗

SPA可能在前端开发上需要更多的工作,尤其是状态管理和路由管理

团队技能

如果团队对后端开发更为熟悉,可能倾向于SSR

如果团队主要专注于前端开发,SPA可能更容易上手

§ 框架/库选择

SPA框架

React.js: 配合React Router用于SPA开发

Vue.js: Vue Router也是SPA开发的常见选择

Angular: 自带的路由模块支持SPA 开发

SSR框架/库

Next.js: 基于React的框架,支持SSR和静态生成

Nuxt.js: 基于Vue.js的框架,转为SSR设计

Angular Universal: 允许Angular应用在服务器端渲染

当你选择框架式,要考虑它是否支持你需要的渲染模式。例如,Next.js和Nuxt.js这样的框架默认支持SSR,而React或Vue本身并不直接提供SSR支持,但可以通过额外配置和库来实现

§ 如何优化SPA的首屏加载时间?

代码分割

使用Webpack等构建工具的动态导入功能,将代码分割成更小的块,按需加载。这意味着用户只下载他们单页真正需要的代码

使用Webpack、Rollup、Parcel等工具实现代码分割 (方式大致为按路由分割、按组件分割、异步加载库和模块、基于条件的分割)

懒加载

对于非关键资源,如图片、视频和非首屏可视范围内的组件,使用懒加载技术,当这些资源进入视口时再加载

预加载与预取

使用和来提前加载关键资源和后续页面可能需要的资源

压缩与最小化

压缩CSS、JavaScript和HTML文件,减少文件大小。同时,对代码进行最小化处理,移除空白和注释,进一步减少文件体积

缓存策略

合理设置HTTP缓存头,如Cache-Control和Expires,确保静态资源和不变的文件被浏览器缓存

Service Worker与离线缓存

实现Service Worker来缓存关键资源和静态文件,使应用可以在离线状态下运行,并加快后续加载速度

优化图片

使用现代图像格式如WebP,以及对图片进行压缩和适当的尺寸裁剪,减少图片的加载时间

减少HTTP请求

减少文件的数量,例如通过合并CSS和JavaScript文件,或者使用雪碧图 (Sprite Images) 来合并小图标

CDN (Content Delivery Network)

使用font-display属性优化字体加载策略,确保在字体在加载之前页面的可读性不受影响

优化第三方脚本

推迟非关键的第三方脚本加载,或者使用异步加载,避免它们阻塞页面渲染

减少DOM操作

减少JavaScript对DOM的操作,特别是避免在渲染关键路径上的负责操作,可以使用虚拟DOM (如React、Vue中的) 来提高渲染效率

使用性能分析工具

使用Chrome Lighthouse、WebPageTest等工具定期检查应用的性能,根据报告中的建议进行优化

§ 如何在SPA中实现SEO优化?

预渲染 (Prerendering)

预渲染是将SPA的动态内容在构建时转换为静态HTML文件,这样搜索引擎爬虫可以轻松抓取页面内容,可以使用prerender-spa-plugin(Vue.js)、next export(Next.js)等工具来实现预渲染

动态渲染 (Dynamic Rendering)

动态渲染结合了SPA的客户端渲染和SSR的优势,它在服务器端为搜索引擎爬虫生成HTML,而对于普通用户则使用客户端渲染。Google提供了动态渲染的指南和工具

使用JSON-LD结构化数据

JSON-LD是一种在网页上嵌入结构化数据的方法,可以帮助搜索引擎更好地理解页面内容。即使页面主要由JavaScript生成,搜索引擎也能通过JSON-LD理解页面的主题和元数据

使用标签和

确保每个页面都有恰当的描述、关键词和

设置robots.txt和sitemap.xml

robots.txt文件告诉搜索引擎爬虫哪些页面是可以或不可以抓取的。sitemap.xml文件则提供了一个网站地图,帮助搜素引擎发现和索引网站的页面

优化页面加载速度

快速的页面加载速度不仅是用户体验的关键,也是SEO的一个重要因素。优化代码、压缩资源、使用CDN和缓存策略都能提高页面加载速度

使用头部和尾部的加载策略

确保页面的头部和关键内容在页面完全加载前就可以被看到,这有助于提高用户体验和SEO评分 (由各种SEO分析工具提供)