Tenía la impresión de que SWR debería devolver los datos obsoletos al cargar la página antes de actualizar la vista con la nueva información de la API.
Creé una aplicación básica de Nextjs con un tiempo de espera de API simple y se está "cargando", durante el tiempo de espera de 5 segundos que he agregado a la API, cada vez. ¿Tenía la impresión de que debería servir la versión previamente almacenada en caché antes de actualizar una vez que regrese la llamada a la API?
URL de Vercel: https://swr-test-mkhx72bz3-webknit.vercel.app/
repositorio - https://github.com/webknit/swr-test
índice.js
import useSWR from 'swr' const fetcher = (...args) => fetch(...args).then(res => res.json()) export default function Home() { const { data, error } = useSWR('/api/hello', fetcher) if (error) return <div>failed to load</div> if (!data) return <div>loading...</div> return ( <div>{data.num}</div> ) }hola.js
export default function handler(req, res) { setTimeout(() => { res.status(200).json({ num: Math.floor(Math.random() * 5000) }) }, 5000) }No soy un experto, pero con "cada vez" ¿quieres decir cada vez que recargas la página web? SWR no almacenará en caché el valor entre actualizaciones de la página web por usted.
Caché en este contexto significa que dos componentes que usan la misma clave swr ('/api/hello') darán como resultado una sola llamada a la API. Entonces, cualquier componente que llame primero al swr obtendrá la respuesta de la API, y el segundo componente obtendrá el mismo valor del caché.
Pero swr aún puede llamar a la API varias veces más tarde para "revalidar" y enviar la respuesta actualizada a ambos (o todos) los componentes que usan esa clave.