SuperAPI AI 工具集

nextjs-app-router-and-streaming-ui

前端与建站

查看项目

更新于 10-16 06:43

技能介绍

用途:用于 App Router 迁移或新建 Next.js UI,改善感知性能与 SEO。

主要能力:按路由段选择渲染模式;定义服务端/客户端组件边界;实现流式渲染与骨架状态;配置缓存与再验证策略;校验可访问性与 Core Web Vitals。

工作流:先为每个路由段确定渲染模式,再划分组件边界,随后实现流式与骨架屏,配置缓存与再验证,最后验证可访问性与性能指标。

必要检查:每个关键路由需有加载与错误 UI;缓存失效策略需支持发布;认证敏感数据不得经客户端缓存泄漏;新增依赖需评估打包体积。

决策原则:除非需要交互,否则优先服务端组件;关键页面的慢依赖使用流式;fetch 逻辑靠近路由边界;改动前后测量 INP/LCP。

常见误区:全客户端 fetch 会损害 SEO、延迟与一致性;省略 error.tsx 会导致生产环境白屏;永久缓存会增加陈旧或未授权数据风险。

证据包:路由渲染决策表、变更路由的性能快照、交互面的可访问性验证、关键旅程的端到端证据。

退出标准:App Router 用户体验具备韧性与性能,发布安全的缓存行为已记录。

限制:资料未提供具体安装命令、代码示例、收费与平台信息。