Estoy aprendiendo Next.js y quiero mostrar datos según la consulta que ingrese un usuario. Quiero hacer uso de las funciones de Next, pero no estoy seguro de si useSWR es la forma correcta de manejar esto porque no pude encontrar ningún ejemplo de lo que estoy tratando de hacer.
Mi código se ve así:
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> </> ); }¿Es este el uso correcto de useSWR o debería usar una búsqueda normal con useEffect?
Personalmente, recomiendo usar useSWR como lo recomiendan los desarrolladores de Next.js ; useEffect es puro gancho de reacción.
La lógica de useSWR es muy simple, no es necesario escribir mucho código. Además, tienes un montón de parámetros de opciones como revalidateOnRender que te serán muy útiles en el desarrollo.
Ejemplo de documentos:
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> }