SPA

• 基础

梗概

• SPA指的是Single Page Application，单页面应用。
• 在SPA中，只有一个HTML页面，所有的页面更新和渲染都在客户端完成，不需要每次请求新的html页面。

适用范围

优点

• 快速流畅的用户体验
• 相对较高的开发效率

缺点

• SEO和页面初始化等方面可能存在一些问题
• 如果JavaScript出现问题，整个页面就无法渲染

SPA的适用场景

• 适用于需要快速流畅体验的项目，如音乐、游戏等Web应用
• 适用于数据量较小、交互较多的项目，如社交、电商等Web应用

路由问题与解决方案

SPA路由问题

• 前端路由（如React Router、Vue Router）是前端控制的URL变化，不会请求新的HTML文件
• 用户直接刷新页面或输入URL时，服务器会尝试寻找对应的文件，找不到就返回404错误
• 例如：用户访问 /about 路径，但服务器上并没有 about.html 文件

nginx的try_files解决方案

• 核心配置：try_files $uri $uri/ /index.html
• 执行逻辑：
  1. 先尝试访问请求的文件（如 /about 对应 /about.html）
  2. 若不存在，尝试访问目录
  3. 最后返回 index.html，由前端路由处理
• 作用：确保所有SPA路由都能正确加载，避免刷新页面时出现404错误

实例

• 一个web app有多个界面
• 这多个界面都作为一个页面，被加载到前端上
• 用户切换到其中一个界面的时候
  • 界面由前端生成
    • 由用户浏览器tab上的JavaScript生成
  • 无需再向后端请求页面