SPA(单页应用)的理解

什么是SPA

SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。

SPA和MPA的区别

多页应用MPA（MultiPage-page application

单页应用与多页应用的区别

SPAMPA
组成一个主页面和多个页面片段多个主页面
刷新方式局部刷新整页刷新
url模式哈希模式历史模式
SEO搜索引擎优化难实现，可使用SSR方式改善容易实现
数据传递容易通过url、cookie、localStorage等传递
页面切换速度快，用户体验良好切换加载资源，速度慢，用户体验差
维护成本相对容易相对复杂

单页应用优缺点

  • 优点:

    • 具有桌面应用的即时性、网站的可移植性和可访问性
    • 用户体验好、快，内容的改变不需要重新加载整个页面
    • 良好的前后端分离，分工更明确

  • 缺点:

    • 不利于搜索引擎的抓取
    • 首次渲染速度相对较慢

题外话：如何给SPA做SEO

下面给出基于Vue的SPA如何实现SEO的三种方式

  • SSR服务端渲染 将组件或页面通过服务器生成html，再返回给浏览器，如nuxt.js
  • 静态化 目前主流的静态化主要有两种：（1）一种是通过程序将动态页面抓取并保存为静态页面，这样的页面的实际存在于服务器的硬盘中（2）另外一种是通过WEB服务器的 URL Rewrite的方式，它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果
  • SSR服务端渲染 将组件或页面通过服务器生成html，再返回给浏览器，如nuxt.js

参考文献