Next.js 13中客户端修改数据后更新服务端组件的方法

方案1：使用revalidatePath（App Router 推荐） #

在客户端组件UsersEdit中，当添加用户的POST请求成功后，调用Next.js提供的revalidatePath方法，强制刷新对应路由的服务端组件数据：

修改UsersEdit.jsx：

'use client'
import { revalidatePath } from 'next/cache'

const UsersEdit = () => {
  const handleAdd = async () => {
    // 调用POST请求添加用户
    const res = await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify({ /* 用户数据 */ }),
      headers: { 'Content-Type': 'application/json' }
    })
    
    if (res.ok) {
      // 触发当前路由的服务端组件重新获取数据，替换成你的实际路由路径
      revalidatePath('/users') 
    }
  }

  return (
    <div>
      <input type="text" placeholder="用户名" />
      <button onClick={handleAdd}>添加用户</button>
    </div>
  )
}

这个方法会让服务端重新执行UsersList中的数据查询，页面自动更新最新用户列表，无需额外状态管理。

方案2：将UsersList改为客户端组件，用SWR/React Query管理数据 #

如果需要更灵活的客户端数据刷新，可把UsersList改为客户端组件，用SWR或React Query处理缓存和自动刷新：

修改UsersList.jsx：

'use client'
import useSWR from 'swr'

const fetcher = async () => {
  const res = await fetch('/api/users')
  return res.json()
}

const UsersList = () => {
  const { data: users, error, mutate } = useSWR('/api/users', fetcher)

  if (error) return <div>加载失败</div>
  if (!users) return <div>加载中...</div>

  return (
    <div>
      {users.map(user => <div key={user.id}>{user.name}</div>)}
    </div>
  )
}

同时修改UsersEdit.jsx，调用mutate方法刷新数据：

'use client'
import { useSWRConfig } from 'swr'

const UsersEdit = () => {
  const { mutate } = useSWRConfig()

  const handleAdd = async () => {
    const res = await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify({ /* 用户数据 */ }),
      headers: { 'Content-Type': 'application/json' }
    })
    
    if (res.ok) {
      // 触发SWR刷新数据
      mutate('/api/users')
    }
  }

  return (
    <div>
      <input type="text" placeholder="用户名" />
      <button onClick={handleAdd}>添加用户</button>
    </div>
  )
}

这种方式适合需要在客户端频繁操作数据、需要缓存控制的场景，数据更新更即时。

方案3：手动触发路由刷新 #

最简单的方式是在添加成功后，用router.refresh()刷新整个页面：

'use client'
import { useRouter } from 'next/navigation'

const UsersEdit = () => {
  const router = useRouter()

  const handleAdd = async () => {
    const res = await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify({ /* 用户数据 */ }),
      headers: { 'Content-Type': 'application/json' }
    })
    
    if (res.ok) {
      // 刷新当前路由
      router.refresh()
    }
  }

  return (
    <div>
      <input type="text" placeholder="用户名" />
      <button onClick={handleAdd}>添加用户</button>
    </div>
  )
}

这个方法会重新加载整个页面的服务端组件，效果类似页面刷新，但不会触发浏览器完整刷新，体验比硬刷新更好。

内容的提问来源于stack exchange，提问作者Ondřej Ševčík