Next.js 性能优化实战：从首屏加载到运行时渲染-编程实验室

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.5s，FID < 100ms，CLS < 0.1，TTI < 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(): Promise<Product[]> { 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 className="h-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'} placeholder="blur" blurDataURL="data: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 lang="zh-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-age=31536000, immutable') return response } // API 路由：短期缓存 + 后台重新验证 if (request.nextUrl.pathname.startsWith('/api/')) { response.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300') return response } // 普通页面：中等缓存 response.headers.set('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=600') return response } export const config = { matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'], }