我用的是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获取新数据。
1条答案
按热度按时间lqfhib0f1#
这个问题很可能是由于Next执行“软导航”并将页面状态缓存在客户端上,如Next: Linking and Navigating中所述。您要导航到的页面缓存在客户端,因此根本不会发生服务器呈现和新数据获取。
为了确保最新的数据,您可以
useEffect
钩子(参见useRouter)中使用router.refresh()
来强制呈现新的服务器。它将触发到服务器的新往返,并使用新数据更新页面,只有在此之后才应用服务器缓存配置。