next.js - 在NextJS的Link组件导航中，请教一个自动缓存问题？

Question

演示：

sandbox地址：https://codesandbox.io/p/sandbox/pensive-mestorf-nyxpst?file=...

打开如果服务没启动，请自行启动

包含2个页面：和1个Api路由：

• 数据获取页：/link/fetch
• 链接导航页：/link/auto，页面链接指向：/api/time
• 缓存刷新路由：/api/time，获取请求转向：/link/fetch

问题复现：

• 打开页面/link/auto后，再打开开发者工具，点开查看网络，清空当前所有记录
• 鼠标先放到页面中的链接，可以看到提示指向：/api/time，点击它页面会直接跳转到：/link/fetch
• 而开发工具，网络中并没有/api/time这个连接的记录

我的尝试：

在link页和api页面分别都加上禁止缓存

export const dynamic = "force-dynamic";export const fetchCache = "force-no-store";export const revalidate = 0;

并重新验证

  revalidatePath("/link/fetch");  revalidatePath("/link/auto");  revalidateTag("dynamic-auto-fetch");  redirect("/link/fetch");

需求：

请问我如何在/link/auto页面中点击链接，在最终跳转到/link/fetch期间，会有一条/api/time请求记录？

Answer 1

用a标签来不用Link组件来做，用户点的时候浏览器就会发请求
或者用js手动发请求：

import { useRouter } from 'next/router';function AutoLinkPage() {  const router = useRouter();  const handleClick = async () => {    // 手动请求    await fetch('/api/time');    // 页面切换    router.push('/link/fetch');  };  return (    <div>      <button onClick={handleClick}>点击跳转</button>    </div>  );}export default AutoLinkPage;