SPA 的概念

一、什么是SPA（SPA 的概念）

单页 Web 应用 (single-page application 简称为 SPA)，简单理解为：仅仅在web页面初始化时加载相应的HTML、JavaScript、CSS，一旦页面加载完成了，SPA不会因为用户的 *** 作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换HTML的内（采用的是div切换显示和隐藏），从而实现UI与用户的交互。

二、SPA的优缺点

1、优点：

（1）由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。

（2）只要使用支持HTML5和CSS3的浏览器就可以执行复杂的SPA,因此，开发人员不必为了写SPA网站而特别学习另一个开发方式，而使用者也不额外安装软件，所以，让开发SPA网页程序的入门和使用门槛降低不少。

2、缺点：

以SPA方式开发的网站不容易管理也不够安全。因为没了一页一页的网页给搜索引擎的爬虫来爬，所以，在搜索引擎最佳化（SEO）的工作上，需要花费额外的功夫。因为没有换页，需要自定义状态来取代传统网页程序以网址来做判断。

假定一个场景，我们需要一个前后端分离的应用，服务端API使用ASP.NET Core开发，前端有两套，一个是用于所有用户的客户端，另一个是给管理员使用的管理后台，使用asp.net core的hosting作为后端+前端的web服务器。应为默认情况下没有开启hosting的spa功能。针对这个，我们可能首先想到的是自定义一个中间件进行处理，当请求特定path，以及静态资源是，加载对应文件夹下的spa应用文件。其实微软早就为我们准备好了这个中间件。这个中间件在： Microsoft.AspNetCore.SpaServices.Extensions 包中。

dotnet new 命令创建项目时，模板就已经内置了 angular和react的spa 模板。新建完成后，可以看到startup启动类中，多出来了两个东西：

直接运行，就可以启动应用程序，就可以看到spa应用程序已经正常工作了。

默认的例子，只hosting 了一个spa应用，回到最初的问题，如果有两个或者多个需要处理呢。这就需要多次配置。

我们来做下多spa的配置。

为了整齐可读性高，我们使用IApplicationBuilder扩展的方式来配置多个SPA应用

最后在 E:\\spa001 和 E:\\spa002 中放置build后的spa应用。启动asp.net core 应用程序，访问appsetting中设置好的对应RouteTemplate，就会打开对应的spa应用程序。spa中请求接口的路径也只需要使用接口的相对路径即可。spa引用的静态资源也会被加载。

SPA是单页Web应用（singlepagewebapplication，SPA）的简写，就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

像Angular、React或Vue就是为了SPA而设计的，结合前端路由库（react-router、vue-router）和状态热存储（rex、vuex）等，可以开发出一个媲美NativeAPP的WebAPP，用户体验得到了很大的提升。

当然，SPA也不是完美的，也不是适合所有的web应用，需要结合项目和场景来选择。

SPA有如下缺点：

初次加载耗时增加。可以通过代码拆分、懒加载来提升性能，减少初次加载耗时。

SEO不友好，现在可以通过Prerender或Serverrender来解决一部分。

页面的前进和后端需要开发者自己写，不过现在一些路由库已经帮助我们基本解决了。

对开发者要求高，由于做SPA需要了解一整套技术栈，所以，要考虑后期是否有合适的人选进行维护。

---