next.js 我需要一个实际的例子，为SWR与回退选项

q3aa0525 于 2023-06-05 发布在其他

关注(0)|答案(1)|浏览(124)

我试图更好地理解SWR如何与NextJS配对工作。我已经仔细研究了SWR - Next.JS SSG和SSR选项卡中显示的示例，但我仍然对如何从外部API获取数据感到困惑：
为什么上面超链接中的示例使用'/API/article'作为键？
useSWR钩子是否会抓住这个键并导航到这个目的地？
是否可以使用外部API响应，例如“https://jsonplaceholder.typicode.com/posts”？
在回退对象中放入什么值？
这是一个简单的代码片段，我用它来修改回退选项。我确实得到了浏览器中显示的数据的1/4秒视图，它消失了，变成了“John Doe”。

import useSWR from "swr"

const fetcher = (...args) => fetch(...args).then(x=>x.json())

export default () =>{
    
    const {data, error} = useSWR("/api/hello", fetcher, {fallback:{"/api/hello":{name:"foo bar" }}})
    console.log(data)
    return <>{data && data.name}</>
}

我希望看到一些其他的使用案例，在那里这个功能会派上用场。如果有一个链接，我可以得到，以便更好地理解这个功能，那么这将是非常有益的我。
我也试着用我的话来解释，看看我的知识是否有错误，如果我的逻辑错误，我可以被纠正。

next.js

来源：https://stackoverflow.com/questions/75987850/i-need-a-practical-example-for-swr-with-the-fallback-option

1条答案

按热度按时间

qvtsj1bj1#

我也有同样的问题，网络上没有太多的信息，所以让我们假设你想从服务器端使用getServerSideProps或getStaticProps获取数据，但你不想传递给fallbackData，你想在组件挂载到客户端时在请求中包含数据。
在您的应用中（_A）

function MyApp({ Component, pageProps, ...rest }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page);
  return (
    <SWRConfig
      value={{
        fallback: pageProps.fallback, //you extract the fallback when you run some code on the server and then it will be automatically injected to the provider
      }}
    >
      {getLayout(<Component {...pageProps} />)}
    </SWRConfig>
  );
}

现在您已经配置了提供程序，让我们举个例子

const Home = () => {
  const { data } = useSWR("yourKey",fetcher);

  return (
    <>
      {data?.productsStoreFront.map((product) => (
        <div>{product.name}</div>
      ))}
    </>
  );
};

Home.getLayout = (page: ReactElement) => {
  return <MainLayout>{page}</MainLayout>;
};

export const getServerSideProps: GetServerSideProps = async () => {
  const cheapestProducts = await GetProductsStoreFront();
  return {
    props: {
      fallback: {
         // it's important that you fallback key match with the key that you specify above
        ["yourKey"]: cheapestProducts,
      },
    },
  };
};

希望能帮上忙！

赞(0）回复(0）举报 2023-06-05

我来回答

next.js 我需要一个实际的例子，为SWR与回退选项

1条答案

相关问题

热门标签

最新问答