最近在團隊中落地Partial Prerendering 部分預渲染，積累了不少經驗。整理出來供參考，希望對做類似工作的同學有所幫助。

核心概念

在這個基礎上，我們可以進一步最佳化：

import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'

const UserSchema = z.object({
  name: z.string().min(2).max(50),
  email: z.string().email(),
  role: z.enum(['admin', 'user', 'guest']).default('user')
})

export async function POST(request: NextRequest) {
  const body = await request.json()
  const result = UserSchema.safeParse(body)
  if (!result.success) {
    return NextResponse.json({ error: result.error.flatten() }, { status: 400 })
  }
  const user = await db.user.create({ data: result.data })
  return NextResponse.json({ data: user }, { status: 201 })
}

這種模式在大型專案中非常實用，能顯著降低維護成本。

深度解析

實際專案中的用法會更復雜一些：

import { Suspense } from 'react'
import { UserList } from './components/UserList'

export default async function HomePage() {
  return (
    <main className="container mx-auto p-4">
      <h1>控制台</h1>
      <Suspense fallback={<Skeleton />}>
        <UserList />
      </Suspense>
    </main>
  )
}

通過這種方式，程式碼的可測試性和可擴充套件性都得到了提升。

落地經驗

以下是一個完整的示例：

import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'

const UserSchema = z.object({
  name: z.string().min(2).max(50),
  email: z.string().email(),
  role: z.enum(['admin', 'user', 'guest']).default('user')
})

export async function POST(request: NextRequest) {
  const body = await request.json()
  const result = UserSchema.safeParse(body)
  if (!result.success) {
    return NextResponse.json({ error: result.error.flatten() }, { status: 400 })
  }
  const user = await db.user.create({ data: result.data })
  return NextResponse.json({ data: user }, { status: 201 })
}

注意邊界條件處理，這在生產環境中至關重要。

調優策略

關鍵在於理解核心邏輯：

import { Suspense } from 'react'
import { UserList } from './components/UserList'

export default async function HomePage() {
  return (
    <main className="container mx-auto p-4">
      <h1>控制台</h1>
      <Suspense fallback={<Skeleton />}>
        <UserList />
      </Suspense>
    </main>
  )
}

效能最佳化需要結合具體場景，不是所有情況都需要過度最佳化。

注意事項

我們可以通過以下方式來改進：

import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'

const UserSchema = z.object({
  name: z.string().min(2).max(50),
  email: z.string().email(),
  role: z.enum(['admin', 'user', 'guest']).default('user')
})

export async function POST(request: NextRequest) {
  const body = await request.json()
  const result = UserSchema.safeParse(body)
  if (!result.success) {
    return NextResponse.json({ error: result.error.flatten() }, { status: 400 })
  }
  const user = await db.user.create({ data: result.data })
  return NextResponse.json({ data: user }, { status: 201 })
}

這套方案已經在線上穩定運行了半年以上，經過了實際驗證。

小結

• 程式碼示例僅供參考，需根據業務場景調整
• Partial Prerendering 部分預渲染不是銀彈，需要根據專案規模和技術棧選擇
• 理解底層原理比記住 API 更重要
• 生產環境使用前務必做好相容性驗證