Блог

Главная - Вопросы по программированию - Next.js выборка данных использует WR или обычную выборку / axios с useEffect?

Next.js выборка данных использует WR или обычную выборку / axios с useEffect?

#javascript #next.js #fetch

#javascript #next.js #выборка

Вопрос:

Я учусь 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?

Ответ №1:

Лично я рекомендую использовать useSWR так, как это рекомендовано Next.js разработчики; useEffect — это чистый реактивный хук.

Логика useSWR очень проста, не нужно писать много кода. Кроме того, у вас есть много параметров опций, 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>
}
Метки: