- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在阅读 Routing API 中的 Next.Js 教程时,我了解了如何使用这 2 个库获取数据。
Isomorphic-unfetch 中的获取对象在 getInitialProps 异步函数中用于调用外部 API。然后在 Route API 部分,SWR 和 { useRouter } 来自 'next/router;塑造对在同一 Next.Js 服务器中开发的内部 API 的调用,具有很大的灵 active 来查询请求参数。
除了这两个方面,这两种方法之间还有什么区别?
最佳答案
isomorphic-unfetch
允许您在客户端 和 服务器上进行 fetch
调用,这就是它在使用 getInitialProps
的示例中显示的原因。
一般来说,你fetch data在服务器上使用 getInitialProps
。这将是阻塞——这意味着在您的数据被获取之前不会返回标记。考虑电子商务网站的产品页面。重要的是我们从服务器而不是客户端返回产品名称、价格和其他信息。
SWR类似,但有点不同。它首先从缓存中返回数据(陈旧),然后发送获取请求(重新验证),最后再次提供最新数据。仪表板页面上有一个真实示例,说明您将在哪里使用 SWR 之类的东西。你不想以阻塞的方式获取 所有 getInitialProps
中的数据,所以你渲染出处于加载状态的仪表板“外壳”,然后使用 SWR 来获取数据客户端。您可以查看此 here 的示例.
来源 - Mastering Next.js 的创建者😄
关于reactjs - SWR vs Isomorphic-unfetch 用于数据获取 Next.Js?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60085398/
我正在使用 Vercel SWR Hook usrSWR,我希望我可以将数据存储在某个遥远组件的缓存中,而不必使用上下文或其他一些全局状态管理器。 具体来说,我在 IndexPage 中使用 init
我希望 UI 中的数据立即更新,而不是等待 SWR 与数据库同步。 我试过关注 the docs ,但 UI 仍然不会自动更新(我切换并返回我的浏览器以更新它)。这是代码: import useSWR
例如,我使用 react 路由器切换到不同的页面: const Apage = () => { const { data, error } = useSWR('/a-data', fetche
当用户在输入搜索中输入一些文本时,必须删除 data-testid = 'loading',现在控制台返回 Unable to find an element by: [data-testid="lo
我决定尝试将我的大部分 API 函数转移到 SWR,因为它让我可以做更多事情! 问题 但是,我遇到了一个巨大的问题,我无法弄清楚如何将 header 正确传递到 SWR。我查看了文档等等,但似乎没有任
我有典型的获取请求 const { data } = useSWR( ['api/projects', API_KEY], fetcher ); 获取数据后,我想过滤项目,在我的情况下基于当前
我正在尝试使用 SWR 和 SSR 创建带分页的产品列表。为此,我将初始数据传递给 SWR,当分页发生变化时,我调用一个 mutate 函数,绑定(bind)到第一个 SWR 请求。 问题是页面没有重
我使用 graphql 和 swr 来获取数据 这是我的抓取器: FetcherHelper.js const ENDPOINT = "/api/graphql"; const headers = {
此组件用于计算部署在 AWS Lambda 上的 Next.js 应用程序页面级别的浏览量 function ViewsCounter({ slug }: { slug: string }) {
您好,我尝试构建一个从 API 获取数据的应用程序。 我使用 SWR Hooks 来获取数据 // libs/fetch.js import fetch from "isomorphic-unfetc
当我单击组件内的按钮时,我通过函数 const readUrl 向页面发送回 id。现在我正在尝试将客户端 id 发送到 /api/dat/[id].js 路由,其中基本上在 mongodb 中搜
我在 NextJS 项目中使用 SWR 库,目前我正在构建一个仪表板。我想点击多个端点以获取不同的数据,但我找不到任何使用 SWR 对端点进行多次调用的引用。 我使用的语法如下; const { da
我想为一个页面获取 3 个端点,我正在使用 next.js 的 SWR Hook ,因为我需要从客户端获取它。documentation对我没有帮助,因为我在另一个文件中有 url 的变量。我对此很陌
我正在使用 SWR 在我的代码中,我使用两者的连接点如下 const vehiclesStates = useSelector(({ vehiclesStates: state }) => state
我目前正在使用 next.js 构建一个 Web 应用程序,它需要跨设备进行实时更新,例如,如果有人加入一个组,则需要立即为该组的所有现有成员显示。 目前,我最初是在页面加载时为用户获取数据,并在必要
我想知道传递给我下面的函数的这个参数的类型是什么 const fetcher = async (...args) => { ~_ 0
const fetcher = (url: string) => fetch(url).then((r) => r.json()); const { data, error } = useSWR(
使用 Next.js 动态路由时,我尝试使用路由查询对象发出 SWR 获取请求,但在设置查询对象之前调用了我的 SWR 获取请求。 给定动态路由/posts/[id] ,考虑页面/posts/123
我正在使用 Next.js 制作购物车组件,但在更新购物车数据后出现刷新问题。我的购物车组件是 Next.js 文档( https://nextjs.org/docs/basic-features/d
在我的应用程序中,每次用户创建新专辑时,发布请求响应都会以更新的专辑列表列表进行响应。 为了提供更好的用户体验,我希望用户无需刷新页面即可看到应用中的新内容。 我知道 SWR 变异的存在,但到目前为止
我是一名优秀的程序员,十分优秀!