Next.js 数据获取 useSWR 还是使用 useEffect 的常规 fetch/axios？答案

【问题标题】：Next.js data fetching useSWR or regular fetch/axios with useEffect?Next.js 数据获取 useSWR 还是使用 useEffect 的常规 fetch/axios？
【发布时间】：2021-12-02 21:42:28
【问题描述】：

我正在学习 Next.js，并希望根据用户输入的查询显示数据。我想使用 Next 的功能，但我不确定 useSWR 是否是处理此问题的正确方法，因为我找不到任何我正在尝试做的示例。

我的代码如下所示：

export default function SearchBar() {
  const [query, setQuery] = useState("");
  const [address, setAddress] = useState("");
  const fetcher = async (url) => await axios.get(url).then((res) => res.data);
  const { data, error } = useSWR(address, fetcher);

  const handleSubmit = (e) => {
    setAddress(`https://jsonplaceholder.typicode.com/todos/${query}`);
    e.preventDefault();
  };

  if (error) return <div>ERROR</div>;

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <Input
          type="text"
          onChange={(e) => setQuery(e.target.value)}
          value={query}
        />
        <SearchButton type="submit">Search</SearchButton>
      </Form>
    </>
  );
}

这是 useSWR 的正确用法还是我应该只使用带有 useEffect 的普通提取？

【问题讨论】：

标签： javascript next.js fetch

【解决方案1】：

我个人建议使用useSWR，因为它是recommended by Next.js developers； useEffect 是纯粹的反应钩子。

useSWR的逻辑很简单，不需要写很多代码。另外，你有很多option params 作为revalidateOnRender，这在开发中会非常有用。

来自文档的示例：

function Profile() {
  const { data, error } = useSWR('/api/user')

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

【讨论】：