reactjs - SWR vs Isomorphic-unfetch 用于数据获取 Next.Js？

Question

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

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

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

Answer 1

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

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

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

---

来源 - Mastering Next.js的创建者