Astro 系列（八）：View Transitions——让 MPA 拥有 SPA 体验
Astro 入门与实战 系列导航
MPA 的固有缺陷
多页应用有一个无法回避的用户体验问题：点击链接后，页面白屏，等待新页面加载。
这是浏览器导航的默认行为——卸载旧文档、请求新 HTML、解析、渲染。对于内容型站点，这个过程通常很快（几十到几百毫秒），但白屏打断感是客观存在的。
SPA 通过 JavaScript 路由解决了这个问题——点击链接后立即显示新内容，没有白屏。但代价是引入了整个客户端路由系统的复杂性。
View Transitions API：浏览器的答案
View Transitions API 是浏览器原生提供的页面过渡机制。它允许开发者在页面导航时定义过渡动画，而不需要使用 SPA 架构。
核心原理：浏览器在导航前截取当前页面的截图，导航完成后捕获新页面，在两帧画面之间执行 CSS 动画（淡入淡出、滑动、变形等）。
关键点：这一切都在浏览器层面完成，不需要任何 JavaScript 框架。
Astro 的封装：一行代码开启
Astro 提供了 <ViewTransitions /> 组件，只需要在布局中引入一次，整个站点的页面切换就有过渡动画：
这个组件本质上是在 <head> 中注入 View Transitions 的 polyfill 和配置，同时处理 Astro 特有的细节——比如岛屿组件的状态在新页面中的恢复。
持久化状态：岛屿不消失
SPA 的另一个优势是页面导航时状态不丢失（滚动位置、表单输入、UI 状态）。Astro 通过 transition:persist 指令实现了类似效果：
- 导航栏的展开/收起状态跨越页面保持
- 视频播放位置在页面切换时不重置
- 购物车内容在浏览商品时持久化
这解决了 MPA "每次导航都重新开始"的体验问题。
预取策略：让导航变成瞬间
Astro 提供了多级预取策略，在用户鼠标悬停时就提前加载目标页面：
- hover：鼠标悬停链接触发预取，适合桌面端
- tap：手指触摸链接触发预取，适合移动端
- viewport：可见区域内的所有链接都预取，最激进
预取的内容缓存在浏览器中，点击时瞬间加载。这让 MPA 的导航体验接近 SPA。
但预取是性能的权衡——预取太多会浪费带宽和 CPU。对于内容型站点，hover 预取是最佳默认值。
SPA 模式：给每个页面注入客户端路由
Astro 可以开启 SPA 模式——页面间导航不再触发完整浏览器导航，而是使用客户端路由：
- 首次访问正常加载整个页面
- 后续导航只替换内容区域，不重载布局/样式/脚本
- 保留所有客户端状态
这几乎等同于单页应用的体验，但代码量远少于传统 SPA 框架。适合需要极致交互体验的内容站点。
何时不该用
View Transitions 不是免费的：
- 增加了约 3KB 的 JS
- 过渡动画在低端设备上可能卡顿
- 与某些第三方脚本（特别是修改 DOM 的）可能冲突
- 浏览器兼容性仍在完善中（Safari 只部分支持）
如果你的站点以纯内容展示为主、用户主要是移动端、页面切换速度已经足够快——可能不需要 View Transitions。
延伸阅读
实操清单
- 在项目中加入
<ViewTransitions />，感受页面切换的变化 - 尝试不同的预取策略（hover / tap / viewport），观察网络请求差异
- 标记一个岛屿组件为
transition:persist，验证状态持久化 - 在低端手机上测试过渡动画的流畅度
created by:codex on deepseek v4 pro