技能介绍

解决什么

在 React 服务端组件与 Next.js 流式渲染的项目里，首屏代码的拆分方式和资源加载策略往往会直接决定页面表现。常见问题包括：SSR 阶段被慢数据拖住整页；Suspense 边界没放对，让渲染看起来“整体卡住”；打包时无意把重型依赖带进首屏；图片、字体、布局抖动让 LCP/INP/CLS 失去控制。

技能如何工作

React Server Components 边界治理

Server Components 只能在服务端执行，可访问数据库、文件系统与内部 API，但不能使用 useState、useEffect 或浏览器 API。
交互组件在文件顶部显式声明 'use client'，并把该边界尽量下沉到组件树深处。
Server 传给 Client 的 props 必须是可序列化值，避免传函数、类实例或不可序列化对象。

Streaming SSR 与打包拆分

围绕数据获取组件放置 Suspense，让每个边界独立流式返回，避免单个等待阻塞整页。
按路由、条件渲染组件（弹窗、抽屉、管理面板）、重型库（图表、富文本、地图）、首屏以下内容做 Code Splitting。
通过 npx next build 查看每路由体积，用 @next/bundle-analyzer 识别大依赖，并按具体能力引入，如 import { debounce } from 'lodash-es/debounce'。

Core Web Vitals 落地

LCP：首屏 hero 图片加 priority，内联关键 CSS，延迟非关键样式；首屏内容避免纯客户端渲染。
CLS：为图片/视频预留宽高，使用 aspect-ratio，为动态内容预留空间，动态插入内容时避免在已有内容上方布局变化。
INP：对动画优先使用 CSS，减少运行时 JS 成本；图标按需引入，如 import { Search } from 'lucide-react'。

资源与监控

图片交给 next/image 统一处理，配置 sizes；首屏以下图片默认懒加载。
字体优先 next/font、自托管、display: 'swap'，并将字族数量控制在 2 个以内。
上线后以真实用户指标（RUM）验证，而不是只看实验室分数。

适用边界

该技能主要面向使用 React + Next.js App Router 的服务端渲染项目，适合排查 SSR、流式渲染、打包体积和 Core Web Vitals 问题。它给出的是工程规则与检查清单；不要把它当成框架替代方案，也不要强行把只能放在客户端的能力塞进 Server Components。