Next.js 性能优化实战从首屏加载到运行时渲染为什么“开箱即用”往往不够用Next.js 确实是 React 生态里最成熟的全栈框架但它的“开箱即用”通常只停留在 Demo 阶段。一旦进入生产环境如果不做针对性优化你大概率会遇到这些问题首屏加载超过 5 秒JS 包太大、Lighthouse 评分不及格图片和字体阻塞渲染、页面交互卡顿客户端渲染过多。这些不是框架的锅而是开发者没用好它提供的优化工具。核心问题通常只有一个渲染模式选错了。SSG静态生成适合内容不常变的页面。SSR服务端渲染适合内容实时且对 SEO 要求高的页面。CSR客户端渲染适合交互多但不在乎 SEO 的后台页面。选错模式后续怎么调优都是事倍功半。优化策略构建、网络与运行时优化可以分为三个层面不同层面的收益点也不一样构建时重点解决首屏加载。包括 SSG/ISR 预生成、代码分割Tree Shaking、图片格式转换WebP/AVIF。网络层重点解决资源分发。利用 CDN 缓存、配置stale-while-revalidate策略、资源预加载preload/prefetch。运行时重点解决交互响应。利用 Server Components 减少客户端 JS、流式渲染Streaming、客户端组件的useMemo/useCallback以及虚拟列表。目标很明确LCP 2.5sFID 100msCLS 0.1TTI 3.5s。工程实现细节1. App Router 与 Server Components在 App Router 中组件默认就是 Server Component这意味着它们不会向客户端发送任何 JavaScript。// app/products/page.tsx import { Suspense } from react import { ProductList } from /components/ProductList import { ProductListSkeleton } from /components/Skeletons // ISR 配置每 60 秒尝试重新生成 export const revalidate 60 export const metadata { title: 商品列表 - 我的商店, description: 浏览我们的精选商品, } interface Product { id: string name: string price: number imageUrl: string } // Server Component 中直接 await 获取数据无需 useEffect async function getProducts(): PromiseProduct[] { const res await fetch(https://api.example.com/products, { next: { revalidate: 60 }, }) if (!res.ok) throw new Error(获取商品失败) return res.json() } export default async function ProductsPage() { return ( main h1商品列表/h1 {/* 使用 Suspense 实现流式渲染避免阻塞整个页面 */} Suspense fallback{ProductListSkeleton /} ProductListWrapper / /Suspense /main ) } // 将异步数据获取逻辑隔离在独立的组件中 async function ProductListWrapper() { const products await getProducts() return ProductList products{products} / }2. 动态导入与代码分割对于重型组件如图表库不要直接引入使用next/dynamic进行按需加载。// components/HeavyChart.tsx use client import dynamic from next/dynamic // 仅在组件渲染时加载且关闭 SSR因为图表依赖 DOM const HeavyChart dynamic( () import(./ChartRenderer), { loading: () div classNameh-64 flex items-center justify-center图表加载中.../div, ssr: false, } ) export function DashboardWithChart() { return ( div h2数据概览/h2 HeavyChart / /div ) }3. 图片与字体优化Next.js 内置了图片优化能自动处理尺寸和格式但要注意priority属性的使用避免首屏图片被懒加载阻塞。// components/OptimizedImage.tsx import Image from next/image export function ProductImage({ src, alt, width, height, priority false, }: { src: string; alt: string; width: number; height: number; priority?: boolean }) { return ( Image src{src} alt{alt} width{width} height{height} sizes(max-width: 768px) 100vw, 50vw priority{priority} // 首屏图片务必开启 loading{priority ? eager : lazy} placeholderblur blurDataURLdata:image/jpeg;base64,... / ) }字体方面使用next/font可以自动优化字体加载消除因字体加载导致的布局偏移CLS。// app/layout.tsx import { Inter } from next/font/google const inter Inter({ subsets: [latin], display: swap, // 先显示回退字体避免文字不可见 variable: --font-inter, }) export default function RootLayout({ children }: { children: React.ReactNode }) { return ( html langzh-CN className{inter.variable} body className{inter.className}{children}/body /html ) }4. 缓存策略配置通过 Middleware 可以统一设置不同资源的缓存头减少重复请求。// middleware.ts import { NextResponse } from next/server import type { NextRequest } from next/server export function middleware(request: NextRequest) { const response NextResponse.next() // 静态资源长期缓存带 hash 文件名 if (request.nextUrl.pathname.startsWith(/_next/static/)) { response.headers.set(Cache-Control, public, max-age31536000, immutable) return response } // API 路由短期缓存 后台重新验证 if (request.nextUrl.pathname.startsWith(/api/)) { response.headers.set(Cache-Control, public, s-maxage60, stale-while-revalidate300) return response } // 普通页面中等缓存 response.headers.set(Cache-Control, public, s-maxage300, stale-while-revalidate600) return response } export const config { matcher: [/((?!_next/static|_next/image|favicon.ico).*)], }关键权衡与避坑指南SSG vs SSR 怎么选SSG首屏最快但内容更新需要重新构建。ISR折中方案预生成 HTML后台定期更新。SSR内容始终最新但首屏较慢每次请求都渲染。建议内容更新频率 1 小时用 SSG/ISR 1 小时用 SSR。Server Components 的边界Server Components 能显著减少客户端 Bundle 大小但它们不能使用useState、useEffect也无法处理用户交互。做法将交互部分提取为 Client Components标记use client非交互部分保持 Server Component。图片优化的存储成本next/image会自动生成多种尺寸和格式这会让存储空间增加 2-3 倍。对于图片量巨大的电商应用建议直接使用 CDN 的图片处理服务如 Cloudinary、Imgix而不是依赖 Next.js 内置优化。流式渲染的 SEO 影响流式渲染Streaming SSR能让用户更快看到内容但部分搜索引擎爬虫可能只抓取初始 HTML忽略异步加载的内容。对于 SEO 关键页面优先使用 SSG 或完整 SSR。总结Next.js 性能优化的核心就两点选对渲染模式和减少客户端 JavaScript。建议从SSG Server Components起步用 Lighthouse 监控 Core Web Vitals。不要盲目优化先测出瓶颈是 LCP 慢还是 CLS 大再针对性下手。每次改动后都要重新测量用数据说话。