用于数据获取 Next.Js 的 SWR 与 Isomorphic-unfetch？

Question

在阅读 Routing API 中的 Next.Js 教程时，我了解了如何使用这 2 个库获取数据。

来自 Isomorphic-unfetch 的 fetch 对象在 getInitialProps 异步函数中用于调用外部 API。然后在路由 API 部分，SWR 和 { useRouter } 来自 'next/router; 塑造对在同一个 Next.Js 服务器中开发的内部 API 的调用，具有很大的灵活性来查询 req 参数。

除了这两个方面，这两种方法之间还有什么其他区别？

Answer 1

isomorphic-unfetch允许您fetch在客户端和服务器上进行调用，这就是为什么在使用getInitialProps.

一般来说，你获取的数据在服务器上使用getInitialProps。这将是阻塞的——这意味着在获取您的数据之前不会返回标记。考虑电子商务网站的产品页面。重要的是我们从服务器而不是在客户端返回产品名称、价格和其他信息。

SWR类似，但略有不同。它首先从缓存中返回数据（stale），然后发送获取请求（revalidate），最后再次携带最新的数据。在仪表板页面上使用 SWR 之类的东西的真实示例。您不想以阻塞方式获取所有数据getInitialProps，因此您将仪表板“外壳”渲染为加载状态，然后使用 SWR 获取数据客户端。您可以在此处查看示例。

来源 - Mastering Next.js 的创造者