React + Next.js 性能优化

性能题要从用户指标反推到 Next.js 请求、渲染、缓存、网络、客户端 JavaScript 和运行时资源，而不是只背某一个优化 API。

本章内容

• 如何建立 React + Next.js 性能指标体系？
• Server Components、SSR、SSG 和 CSR 如何影响性能？
• 如何定位并消除 Next.js 数据请求瀑布？
• 如何优化客户端 bundle 和 hydration？
• React 列表、表格和大组件如何优化？
• Next.js 图片、字体和静态资源如何优化？
• 如何优化缓存、预取和 revalidation？
• 如何优化 INP 和 React 交互响应？
• 如何优化 LCP、TTFB 和服务端性能？
• 如何建立性能回归和预算治理？

官方资料

• Next.js Caching
• Next.js Optimizing
• Next.js Lazy Loading
• Next.js Prefetching