¿Qué es SWR y cómo se usa en Next.js?

SWR (state-while-revalidate) es un método de obtención de datos creado por Vercel. Funciona obteniendo datos primero, enviando una solicitud de recuperación para revalidarlos y luego devolviendo los datos actualizados.

SWR es muy poderoso, ya que no solo permite la recuperación de datos reutilizables, sino que también tiene almacenamiento en caché, paginación y revalidación incorporados en el enfoque. Usando SWR, un sitio web muestra contenido en caché mientras obtiene contenido actualizado en segundo plano.

¿Cómo funciona la ROE?

Normalmente, obtendría datos usando Axios o el método de obtención. Estos métodos se conectan al recurso de datos, recuperan y devuelven los datos y luego cierran la conexión. Sin embargo, SWR obtiene datos de manera diferente. Funciona en tres pasos:

1. Devuelve datos obsoletos de la memoria caché.
2. Envía la solicitud de recuperación para revalidar los datos.
3. Devuelve datos actualizados.

SWR no reemplaza a la API de búsqueda. En su lugar, le permite mostrar contenido almacenado en caché en su sitio tan pronto como el usuario lo visite y actualizar ese contenido cuando se vuelva obsoleto.

Entonces, ¿cómo sabe SWR cuándo el caché no es válido? A través de una respuesta de encabezado de control de caché. La respuesta tiene dos estados: fresca y rancia. Un estado nuevo significa que el caché se puede reutilizar, mientras que un estado obsoleto significa que no es válido. Usted especifica el tiempo que la respuesta sigue siendo válida en la directiva max-age.

SWR considera que cualquier respuesta almacenada en caché anterior a max-age no es válida. Después de que su aplicación represente los datos almacenados en caché obsoletos, SWR los revalidará y devolverá datos nuevos que puede usar para actualizar la página.

Cómo obtener datos en Next.js con SWR

Comience a usar SWR en React instalándolo primero a través de un administrador de paquetes. Este comando usa npm.

npm install swr\n

En un archivo de componente, importe el gancho useSWR de swr.

import useSWR from "swr"\n

El gancho useSWR acepta dos argumentos:

1. Un identificador único para los datos. Por lo general, la URL de la API.
2. Una función de búsqueda. Esta es la función utilizada para recuperar datos. Puede usar fetch, Axios u otras herramientas de obtención de datos.

El gancho devuelve los datos y un objeto de error. Asegúrese de usar este gancho de acuerdo con las mejores prácticas.

Aquí hay un ejemplo que muestra cómo usar el gancho useSWR.

const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n

Puede representar los datos en un componente como este:

import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n

Esta es una implementación simple de SWR. Los documentos de SWR son más detallados, así que échales un vistazo para obtener más información.

¿Por qué usar ROE?

SWR tiene muchas ventajas sobre otros métodos de obtención de datos.

almacenamiento en caché

Con los métodos tradicionales de obtención de datos, debe usar un control giratorio o un mensaje de carga para mejorar la experiencia del usuario cuando la aplicación obtiene datos.

SWR le permite mostrar datos obsoletos al usuario, mientras los revalida. Esto significa que el usuario no tiene que esperar a que el buscador devuelva los datos.

Revalidación

A través de la revalidación, SWR vuelve a actualizar los datos almacenados en caché y la página se vuelve a representar con datos actualizados. La revalidación es especialmente importante para los sitios cuyo contenido cambia periódicamente.

Paginación

El enlace useSWRInfinite de SWR le permite implementar la paginación fácilmente o incluso crear una interfaz de usuario de carga infinita.

Recuperación de posición de desplazamiento

SWR permite a un usuario volver a la posición de desplazamiento en una página cuando vuelve a ella. Esto contribuye a una mejor experiencia de usuario.

Obtención de datos dependientes

Puede obtener datos que dependen de otros datos. Le permite utilizar los datos devueltos de una solicitud en otra solicitud.

Use SWR para mejorar la usabilidad

SWR es una herramienta de obtención de datos con una función de revalidación automática que ayuda a las aplicaciones a generar contenido almacenado en caché mientras esperan contenido actualizado. Los usuarios pueden interactuar con el contenido de inmediato en lugar de esperar a que el servidor devuelva los datos.

SWR también lo ayuda a crear paginación, carga infinita, recuperación de posición de desplazamiento y otras funciones complejas. Si está obteniendo datos que necesitan actualizaciones periódicas, definitivamente debería considerar usarlos.