本技能面向使用 React 与 Next.js 的现代前端开发，提供结构化模式与检查清单。
用途：解决服务端与客户端组件划分、性能瓶颈定位与核心网页指标优化问题。
主要能力：
- React Server Components：默认在服务端运行，可直接访问数据库、文件系统与内部 API；服务端组件不可使用 useState、useEffect 或浏览器 API，交互组件需在文件顶部加 'use client'，且客户端边界应尽量下移，服务端到客户端只传可序列化 props。
- 流式 SSR：使用 Suspense 边界的 fallback，让数据获取组件独立流式输出，避免阻塞整页。
- 代码分割：用 next/dynamic 对路由边界、条件渲染组件（弹窗、抽屉、后台面板）、重型库及首屏以下内容做动态导入。
- 打包优化：在 next.config.js 的 experimental.optimizePackageImports 中按需引入大型库；用 npx next build 查看各路由体积，配合 @next/bundle-analyzer 定位大依赖，用 date-fns 或 dayjs 替代 moment，优先 CSS 动画，图标库按名导入。
- Core Web Vitals：给出 LCP、INP、CLS 的达标阈值，并覆盖图片优化（next/image、priority、sizes、placeholder）、字体加载（next/font、display: 'swap'、自托管）与 CLS 预防（显式宽高、aspect-ratio、预留空间）。
- 监控：用 web-vitals 的 onCLS、onINP、onLCP 采集真实用户指标。
使用方式：按上述模式编写代码与配置，并依据清单逐项核查。
适用场景：基于 React / Next.js App Router 的 Web 应用性能优化。
限制：示例默认采用 Next.js 生态；具体框架版本要求、完整安装命令及是否收费暂未提供。