使用 useSWR 的 Next.js 动态页面

Question

我想使用 useSWR 和 useRouter 基于 Saloon 配置文件的 ID 创建动态页面，但数据在页面渲染后加载。

这是我的代码：

import useSWR from "swr";
import { useRouter } from "next/router";

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function FindSaloonProfile() {
  const router = useRouter();
  const { id } = router.query;
  const { data, error } = useSWR(
    id ? `/api/getSaloons` : null,
    id ? fetcher : null
  );

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  return <>Hello {data.name} </>;
}

如果我 console.log(data)，它开始获取 undefined 并随后加载数据，但为时已晚，因为页面是已经渲染了。

我做错了什么？

Answer 1

将 fetcher 包装在一个函数中：

const fetcher = (url) =>
  fetch(url).then(
    async (res)=> {
      const result = await res.json();

      if (res.status !== 200) {
        return Promise.reject(result);
      } else {
        return result;
      }
    }
  );

Answer 2

Next.js 是服务器端渲染框架，但大多数 SWR 仅在客户端工作，因此这意味着 API 在页面加载（或 Javascript 加载）之前不会获取数据。

最近，SWR 发布了 Next.js 集成的新文档。你可以在这里查看。

https://swr.vercel.app/docs/with-nextjs

让我试试简而言之，

getStaticProps将帮助您在服务器端获取数据

 export async function getStaticProps() {
  // `getStaticProps` is executed on the server side.
  const saloons = await getSaloons() //you can call `fetcher` here too
  return {
    props: {
      fallback: {
        '/api/getSaloons': saloons
      }
    }
  }
}

之后，您需要导入SWRConfig进行fallback这是为了获取的数据（React-Next.js Hydration 可以帮助您将数据与 React 的上下文链接起来）

export default function Page({ fallback }) {
  // SWR hooks inside the `SWRConfig` boundary will use those values.
  return (
    <SWRConfig value={{ fallback }}>
      <FindSaloonProfile />
    </SWRConfig>
  )
}

最后，您只需拥有常用的组件

import useSWR from "swr";
import { useRouter } from "next/router";

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function FindSaloonProfile() {
  const router = useRouter();
  const { id } = router.query;
  //your data will get from the server initially, and then it will try to fetch again for the update
  const { data, error } = useSWR(
    id ? `/api/getSaloons` : null,
    id ? fetcher : null
  );

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  return <>Hello {data.name} </>;
}

希望我的答案能够帮助您