如何重新加载 Next.js 页面初始属性而不重新加载整个页面

Question

我有一个 Next.js 页面，它在函数中获取数据getInitialProps，我想从浏览器重新加载这些数据，而不重新加载页面，这会导致性能不佳并丢失用户的滚动位置。有没有办法重新加载初始道具而不重新加载整个页面？

Answer 1

这可以通过调用来完成router.replace：

import { useRouter } from 'next/router';

function YourPage({ someProps }) {
  const router = useRouter();

  // Call this function when you want to refresh the data
  const refreshData = () => router.replace(router.asPath);

  // Your JSX
}

router.replace是一种更新 URL 而不向历史记录添加新条目的方法。router.asPath是当前的 URL。因此，这就像将客户端重定向到同一页面，并且客户端重定向重新获取道具。

我不相信上面的答案不起作用，因为函数无法序列化并从服务器发送到客户端。