页面架构（怎么选）MPA vs SPA vs Hybrid
先看怎么选
先别急着选 React Router 或 Astro。页面架构真正要回答的是：用户是否需要独立 URL、搜索引擎是否要读、切换是否高频，以及哪些区域真的需要持续状态。
朱批内容要被搜索和分享，优先 MPA/SSG；高频操作围绕同一份状态，考虑 SPA；公开内容和复杂后台同时存在，用 Hybrid 分开承载。
多页应用 / 静态生成
每个主要页面都有独立 URL 和 HTML，导航时加载目标页面；静态生成会在构建期提前产出这些页面。
- 适合
- 博客、文档、作品集、内容目录，以及需要 SEO、分享预览和稳定首屏的公开页面。
- 不适合
- 用户要在一个工作台里高频切换视图，并持续保留复杂的临时状态时。
实现细节与 Prompt
- web
- 语义链接 + 独立 URL + 服务端或构建期 HTML
- stacks
- Astro / Eleventy / Next.js SSG / 服务端模板
Build the public site as statically generated multi-page pages: give every article and category a stable URL, render useful HTML at build time, use semantic links for navigation, and add client-side JavaScript only to the interactive controls that need it.单页应用
首次加载应用壳，后续在浏览器内更新路由和内容；多个视图共享同一份客户端状态。
- 适合
- 管理后台、编辑器、协作工具等高频操作界面，用户会长时间停留并反复操作同一批数据。
- 不适合
- 只是因为团队熟悉 React；内容页面为此承担更重的脚本、SEO 和加载复杂度不划算。
实现细节与 Prompt
- web
- History API + client router + 状态管理
- stacks
- React Router / Vue Router / client-side app shell
Build this authenticated workspace as a single-page application: keep filters and draft state while switching views, use client-side routing with real browser history, provide route-level loading and error states, and make deep links reload safely.混合架构
按页面任务切分渲染方式，公开内容保留独立 HTML，复杂工作区再加载客户端应用能力。
- 适合
- 同一产品既有博客、帮助中心等公开内容，又有登录后的仪表盘、编辑器或管理后台。
- 不适合
- 产品很小且一种架构已经覆盖全部任务；混合只是增加部署、认证和边界维护成本。
实现细节与 Prompt
- web
- route-level rendering strategy + islands / partial hydration
- stacks
- Astro islands / Next.js App Router / Remix
Use a hybrid architecture: statically render the public marketing and article routes, keep stable URLs and metadata, and load the authenticated admin workspace as an interactive client application. Share design tokens and authentication boundaries without forcing one rendering mode on every route.详细说明
页面架构不是视觉风格，也不是框架偏好。它决定页面如何被打开、保存、分享和恢复。先把用户任务与 URL 关系画出来，再决定哪里需要客户端应用能力。
先问四个问题
- 这个页面是否需要被搜索引擎收录？
- 用户是否会复制 URL，之后回到同一个位置？
- 用户切换视图时，是否要保留大量未提交状态？
- 交互复杂度集中在少数页面，还是遍布全站？
前两个问题偏向 MPA/SSG，后两个问题偏向 SPA。答案分散在两边时，不必强行二选一，Hybrid 往往更诚实。
个人博客为什么选 Hybrid
个人博客的访客要阅读、搜索和分享文章，所以首页、分类页和文章详情应该有稳定 URL，并尽量直接输出 HTML。博主登录后要连续新建、编辑和管理文章，这部分才需要更强的客户端状态。
因此案例采用：
- 公开内容：MPA + 静态生成。
- 管理后台：登录后按需加载客户端交互。
- 两边共用：身份、设计 tokens 和内容数据，不共用一套强制渲染方式。
常见误区
把 SPA 当成“更现代”
SPA 解决的是高频状态交互，不是视觉高级感。页面只有阅读和跳转时，语义链接与独立 HTML 已经够用。
把 MPA 当成“每次都很慢”
静态 HTML 可以被 CDN 缓存，浏览器还能预取链接。页面切换速度需要实测，不应靠架构名称判断。
混合架构没有边界
如果同一条路由既在服务端取数，又在客户端重复取数，认证和错误状态会变得难以推理。Hybrid 的关键是按路由或功能边界明确所有权。
给 agent 时要说清楚
不要只说“用 Next.js”或“做成 SPA”。告诉 agent 哪些页面必须有独立 URL、哪些内容要静态输出、哪些状态要跨视图保留，以及客户端 JavaScript 允许出现在哪里。