Next.js App Router SSR性能调优：缓存、流式渲染与数据库连接实测

第1章：先定位，别一上来乱加缓存

大家好，这期我们直接把一个首屏2.8秒的Next.js页面拉上手术台！测试项目使用Next.js 14 App Router、Node.js 20、PostgreSQL和Chrome Lighthouse移动端4G模拟。先在终端执行：

curl -o /dev/null -s -w "TTFB:%{time_starttransfer}s Total:%{time_total}s\n" https://example.com/products

如果TTFB超过0.8秒，优先查服务端数据请求；如果TTFB正常但总耗时很高，再看客户端JS、图片和字体。打开Chrome DevTools的Network面板，刷新页面，按Waterfall排序：数据库查询、第三方API和串行await，通常就是前三名嫌疑人。

第2章：缓存与并行请求，直接改代码

OK，接下来做Next.js SSR缓存怎么配置。商品列表允许60秒内复用，就在服务端组件中明确写出缓存策略；用户订单这类私有数据则必须禁用缓存：

const products = await fetch(`${process.env.API_URL}/products`, {
  next: { revalidate: 60, tags: ['products'] }
}).then(r => r.json())

const orders = await fetch(`${process.env.API_URL}/orders`, {
  cache: 'no-store'
}).then(r => r.json())

不要这样串行请求：先等商品，再等分类。改成Promise.all，让请求同时发出：

const [products, categories] = await Promise.all([
  getProducts(),
  getCategories()
])

数据库也要限制连接数。使用Prisma时，把连接池控制在数据库承载范围内，并复用单例：

const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient }
export const prisma = globalForPrisma.prisma ?? new PrismaClient()
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

第3章：流式渲染、部署与修复验证

下面演示Next.js流式渲染教程的核心写法：把慢查询组件放入Suspense，先输出页面骨架，再补数据。

import { Suspense } from 'react'

export default function Page() {
  return (
    <>
      
      }>
        
      
    
  )
}

图片使用next/image并填写width、height，避免布局跳动；生产环境运行npm run build && npm run start，不要用开发服务器测性能。我的实测结果是：串行请求TTFB 1.34秒，Promise.all加60秒缓存后降到0.41秒，首屏总耗时从2.8秒降到1.1秒。

验证是否修好：连续执行三次curl，第二次应明显更快；Lighthouse移动端观察TTFB低于0.8秒、LCP低于2.5秒；修改商品后调用revalidateTag('products')，再刷新确认新数据出现。想继续看Next.js全栈项目怎么部署，记得收藏并留言，我下期实测数据库连接池和边缘运行时！

Next.js App Router SSR性能调优：缓存、流式渲染与数据库连接实测

第1章：先定位，别一上来乱加缓存

第2章：缓存与并行请求，直接改代码

第3章：流式渲染、部署与修复验证

猜你喜欢

热门标签