Next.js中router push重定向后列表页数据更新延迟问题求助

问题根源 #

你遇到的延迟是因为SWR默认优先返回缓存数据，后台才会异步重新验证更新缓存，所以跳转后看到的是旧缓存；而列表页的!jobsdata判断只在首次加载时生效，有缓存后就不会触发PageLoader。

具体解决方案 #

1. 提交表单后主动刷新SWR缓存

在表单页导入SWR的配置钩子，提交成功后主动标记对应缓存失效，强制列表页重新请求最新数据：

import { useSWRConfig } from 'swr'
import { useRouter } from 'next/router'
import { useForm } from 'react-hook-form'

// ... 其他组件代码
const { mutate } = useSWRConfig()
const router = useRouter()

const onSubmit = handleSubmit(async (data) => {
    setLoading(true)

    try {
        await axios.post('/api/jobs', data)
        // 主动让/api/jobs的缓存失效，触发重新请求
        await mutate('/api/jobs')
        router.push('/jobs')
    } catch (error) {
        setShowErrors(error.response.data.errors)
    } finally {
        setLoading(false)
    }
})

2. 优化列表页的加载状态判断

改用SWR返回的isLoading状态控制PageLoader，这样即使有缓存，重新请求时也会显示加载：

const { data: jobsdata, error, isLoading } = useSWR('/api/jobs', () => 
    axios.get('/api/jobs')
        .then(response => response.data.data)
)

// 正在加载（包括首次加载和重新验证）时显示加载组件
if (isLoading) {
    return (<PageLoader />)
}

if (error) {
    return <div>加载失败，请重试</div>
}

原理说明 #

• mutate('/api/jobs')会直接让SWR中该key的缓存失效，跳转后列表页会立即发起新请求获取最新数据，不用等缓存自动过期。
• isLoading能覆盖首次加载和重新验证两种场景，解决提交后跳转不显示加载的问题。

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