Next.js 数据获取 useSWR 或常规 fetch/axios with useEffect?

Next.js data fetching useSWR or regular fetch/axios with useEffect?

我正在学习 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 进行正常提取?

就我个人而言,我建议使用 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>
}