内部原理与架构实践

编译与打包

• 路由编译：扫描 app 目录生成路由树与段配置。
• 组件切分：区分服务端/客户端组件，分别编译与打包。
• 资源优化：图片、字体等在构建阶段优化与指纹化。

渲染管线（简化）

1. 解析路由与布局，确定页面的静态外壳与动态区块。
2. 服务端执行数据获取（fetch），应用缓存策略与再验证。
3. 生成初始 HTML（SSR/SSG/PPR 外壳）。
4. 通过流（stream）渐进发送动态内容，客户端按需水合。

缓存与再验证

• 层级：请求级（fetch）、页面级（revalidate）、全局/标签级。
• 行为：命中缓存（快速），过期后后台再验证并更新。
• 触发：用户访问、Server Actions 更新后主动 revalidate。

App Router 设计要点

• 嵌套布局：将稳定 UI 与内容动态区分，提升复用。
• 并行/拦截路由：支持复杂界面结构与模态场景。
• 错误边界与保留文件：统一错误/404 处理与可读性。

架构实践

• 领域驱动目录：按业务域组织路由与组件。
• 服务端优先：默认在服务端完成数据处理与鉴权。
• 轻客户端：仅为交互与动画保留客户端组件。
• 一致性：通过 revalidatePath/标签维护数据一致性与可观测性。

性能与可观测性

• PPR 与流式：快速首屏与渐进加载。
• 指标采集：TTFB、LCP、CLS、INP 等核心指标。
• 错误监控：统一上报与告警（instrumentation.ts）。

总结

• Next.js 以路由为骨架、以渲染为核心、以缓存为加速，结合服务端能力构建现代 Web 应用。
• 掌握 App Router、RSC、缓存与再验证，即可应对大多数场景并持续优化性能。