Next.js 14中revalidatePath刷新时服务端组件的pending状态处理

核心思路 #

初始的<Suspense>仅处理组件首次加载的等待状态，revalidatePath触发的后台数据更新不会自动触发它的fallback。要在重新获取数据时显示加载动画，需要在客户端组件中管理mutation的pending状态，结合条件渲染控制加载UI的显示。

方案1：使用useTransition配合Server Action #

如果你的mutation操作基于Next.js Server Action实现，可通过useTransition追踪操作的pending状态，在等待期间显示加载动画。

步骤1：定义Server Action（示例：actions.ts）

'use server'

import { revalidatePath } from 'next/cache'
import { updateData } from '@/lib/data-service'

export async function updateItem(formData: FormData) {
  // 执行数据修改逻辑
  await updateData(formData)
  // 触发目标路径的缓存重新验证
  revalidatePath('/your-page-path')
}

步骤2：客户端组件处理状态与渲染

'use client'

import { useTransition } from 'react'
import { updateItem } from './actions'
import ServerComponent from './ServerComponent'
import { Skeleton } from '@/components/ui/skeleton'

export default function Page() {
  const [isPending, startTransition] = useTransition()

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget as HTMLFormElement)
    // 用startTransition包裹mutation操作，自动追踪pending状态
    startTransition(async () => {
      await updateItem(formData)
    })
  }

  return (
    <section>
      <form onSubmit={handleSubmit}>
        {/* 表单内容 */}
        <button type="submit" disabled={isPending}>
          {isPending ? '保存中...' : '保存'}
        </button>
      </form>

      {/* 根据pending状态切换加载骨架或服务端组件 */}
      {isPending ? (
        <Skeleton />
      ) : (
        <Suspense fallback={<Skeleton />}>
          <ServerComponent />
        </Suspense>
      )}
    </section>
  )
}

方案2：使用useOptimistic实现乐观更新+加载状态 #

如果需要更流畅的用户体验，可通过useOptimistic先展示乐观更新后的内容，同时显示加载提示，直到revalidate完成。

'use client'

import { useOptimistic } from 'react'
import { updateItem } from './actions'
import ServerComponent from './ServerComponent'
import { Skeleton } from '@/components/ui/skeleton'

// 假设服务端组件渲染的数据结构
type Data = { id: string; content: string }

export default function Page({ initialData }: { initialData: Data }) {
  const [optimisticData, setOptimisticData] = useOptimistic<Data>(
    initialData,
    (currentState, newContent) => ({ ...currentState, content: newContent })
  )
  let isPending = false

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget as HTMLFormElement)
    const newContent = formData.get('content') as string
    
    isPending = true
    setOptimisticData(newContent)
    try {
      await updateItem(formData)
    } finally {
      isPending = false
    }
  }

  return (
    <section>
      <form onSubmit={handleSubmit}>
        <input name="content" defaultValue={initialData.content} />
        <button type="submit" disabled={isPending}>
          {isPending ? '保存中...' : '保存'}
        </button>
      </form>

      {/* pending时显示乐观更新内容+加载提示，否则渲染服务端组件 */}
      {isPending ? (
        <div>
          <div>{optimisticData.content}</div>
          <p className="text-sm text-gray-500">正在保存...</p>
        </div>
      ) : (
        <Suspense fallback={<Skeleton />}>
          <ServerComponent />
        </Suspense>
      )}
    </section>
  )
}

方案3：手动管理加载状态（基础版） #

如果不需要复杂状态管理，也可以用useState直接标记pending状态：

'use client'

import { useState } from 'react'
import { updateItem } from './actions'
import ServerComponent from './ServerComponent'
import { Skeleton } from '@/components/ui/skeleton'

export default function Page() {
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget as HTMLFormElement)
    setIsLoading(true)
    try {
      await updateItem(formData)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <section>
      <form onSubmit={handleSubmit}>
        {/* 表单内容 */}
        <button type="submit" disabled={isLoading}>
          {isLoading ? '处理中...' : '提交'}
        </button>
      </form>

      {isLoading ? <Skeleton /> : (
        <Suspense fallback={<Skeleton />}>
          <ServerComponent />
        </Suspense>
      )}
    </section>
  )
}

关键说明 #

• 所有状态管理逻辑必须放在客户端组件中，服务端组件无法直接追踪客户端的mutation状态。
• revalidatePath触发后，Next.js会在后台重新生成页面数据，数据更新完成后客户端会自动同步最新内容，此时可取消加载状态。
• 如果mutation是通过客户端fetch调用API实现，上述状态管理方式同样适用，只需将Server Action调用替换为fetch请求即可。

内容的提问来源于stack exchange，提问作者Emi