Overview
Next.js 提供了多种性能优化手段：路由级代码分割、Edge/Server 渲染、next/image、以及强大的缓存与数据获取策略。本文总结在实际项目中最常用、收益最高的优化手段与顺序。
1. 数据获取与缓存策略
- 使用
fetch(url, { next: { revalidate: N }})在 App Router 中开启 ISR，降低后端压力。 - 对稳定数据使用
export const revalidate = N进行路由级缓存。 - 动态个性化内容放到客户端获取，避免阻塞首屏。
2. 图片优化
- 使用
next/image，并提供明确的width/height。 - 合理的图片格式（WebP/AVIF）与压缩质量，CDN 缓存策略要明确。
3. 代码分割与懒加载
- 默认路由级代码分割已开启。
- 对于非首屏、体积较大的组件使用
dynamic(() => import('...'), { ssr: false })或懒加载。
4. 避免不必要的客户端渲染
- 能在服务端完成的逻辑尽量放到 Server Component。
- 大型表单或重交互区块再下沉到 Client Component。
5. 性能基线与监控
- 使用 Lighthouse/ Web Vitals 建立基线。
- 接入 RUM（如 Vercel Analytics）持续观测真实用户指标。
结语
先做“性价比最高”的优化（缓存/图片/首屏体积），再逐步打磨长尾细节，能在最短时间得到最大的性能提升。