页面不刷新数据,即使它在Next JS 13.4中使用无存储缓存

bvjveswy  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(150)

我用的是Next JS 13.4,用的是app route。我像这样获取API use选项缓存no-store

export const getBooks = () => new Promise(async (resolve, reject) => {
  const response = await fetch(process.env.API_BASE_URL + `/books`, { cache: 'no-store' });

  const data = await response.json();

  if (response.status >= 400) {
    reject(data);
  }

  resolve(data);
});

我使用/ URL的数据手册。我在/books/[id]/edit URL上更新数据,当成功更新时,我将页面导航到/router.replace('/')

// '/books/[id]/edit'

const editBookMutation = useMutation({
    apiFn: (data) => updateBook(book.id, data),
    onSuccess: () => {
      router.replace('/');
    },
    onError: (error) => {
      toast.error(error.message);
    }
});

但是在导航到/ URL后,图书数据与应该匹配的数据不匹配(图书数据仍然与旧数据匹配)。我想在导航到/ URL后,再次重新获取API,以从API获取新数据。

lqfhib0f

lqfhib0f1#

这个问题很可能是由于Next执行“软导航”并将页面状态缓存在客户端上,如Next: Linking and Navigating中所述。您要导航到的页面缓存在客户端,因此根本不会发生服务器呈现和新数据获取。
为了确保最新的数据,您可以

  • 在客户机上获取数据,并使用TanStack Query等工具处理数据缓存
  • 在页面上的useEffect钩子(参见useRouter)中使用router.refresh()来强制呈现新的服务器。它将触发到服务器的新往返,并使用新数据更新页面,只有在此之后才应用服务器缓存配置。

相关问题