Next.js中使用getServerSideProps时如何重新验证/刷新MongoDB数据？

错误分析 #

你之前的SWR用法存在几个问题：

• 用全局变量w存储数据，并非React状态，数据变化无法触发组件重新渲染
• 自定义dataSWR函数调用SWR，但未将返回的data关联到组件渲染逻辑
• axios请求写法冗余，同时使用await和.then

修正步骤与代码 #

1. 正确导入SWR
   确保已安装swr包，并在组件中导入：

import useSWR from 'swr'
import axios from 'axios'

2. 优化Fetcher函数
   简化请求逻辑，避免冗余写法：

const fetcher = async () => {
  const res = await axios('/api/getTeam/data')
  return res.data
}

3. 组件内正确使用SWR
   将服务端获取的初始数据传入SWR，利用SWR的响应式数据渲染UI，并通过mutate手动触发数据刷新：

export async function getServerSideProps() {
  await db.connect();
  const x = await Team.find({}).lean() 
  await db.disconnect();

  return {
    props: {
      dataX: JSON.parse(JSON.stringify(x))
    }
  }
}

const Index = ({ dataX }) => {
  // 传入服务端初始数据，避免首次加载空白
  const { data, error, mutate } = useSWR('dashboard', fetcher, { initialData: dataX })

  // 处理错误与加载状态
  if (error) return <div>数据加载失败</div>
  if (!data) return <div>加载中...</div>

  // 修改数据库后触发数据刷新的函数
  const handleUpdate = async () => {
    // 这里调用修改数据库的API
    await axios.post('/api/updateTeam', { /* 你的更新参数 */ })
    // 触发SWR重新获取最新数据
    mutate()
  }

  return (
    <div>
      <button onClick={handleUpdate}>修改数据库值</button>
      {/* 渲染最新数据 */}
      {data.map(item => (
        <div key={item._id}>{/* 根据你的数据结构渲染内容 */}</div>
      ))}
    </div>
  )
}

export default Index

关键说明 #

• 初始数据复用：通过initialData把getServerSideProps获取的服务端数据传给SWR，保证页面首次加载有内容，同时SWR会在后台自动校验数据新鲜度
• 手动触发刷新：点击修改按钮后，调用mutate()让SWR重新请求API，获取最新数据库数据并更新UI
• 响应式数据：SWR返回的data是响应式的，数据变化会自动触发组件重新渲染，无需手动维护状态

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