¿Qué es SWR?

SWR (State While Revalidate) es un enlace de React que se utiliza para obtener datos del servidor. El SWR proporciona los datos de la caché y luego crea un servidor para validar, una vez que lo ha hecho, combina los datos para la consistencia de los datos.

Podemos instalarlo usando el comando de instalación de NPM.

npm install swr

¿Cómo usarlo SWR ?

El SWR es un simple gancho de React y devuelve datos y errores en el modelo de objetos.

Aquí está el ejemplo tomado del sitio web oficial.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

Características ofrecidas por SWR

SWR proporciona muchas funciones de rendimiento, corrección y estabilidad para crear su aplicación con mejores experiencias de usuario.

Performance

El SWR está construido por el equipo de Next.JS con un alto rendimiento en mente. Ha construido un sistema de almacenamiento en caché y sistemas de deduplicación, que se saltan las redes innecesarias. Dado que es un gancho de React, puede evitar una repetición innecesaria debido a las llamadas de red.

Entonces el beneficio sería:

• sin solicitudes innecesarias
• sin repeticiones innecesarias
• no se importa código innecesario

Precarga de datos

Puede precargar los datos agregando el <link ref="preload" href="..."/>. Pero en algunos, es necesario obtener previamente los datos mediante programación.

SWR proporciona una opción para obtener previamente los datos mediante programación.

import { mutate } from 'swr'

function prefetch () {
  mutate('/api/data', fetch('/api/data').then(res => res.json()))
  // the second parameter is a Promise
  // SWR will use the result when it resolves
}

Manejo de errores

El manejo de errores es crucial para que cualquier aplicación proporcione una mejor experiencia de usuario. SWR proporciona una opción para manejar el error globalmente, lo que reduce muchos códigos en la compilación final.

import React from "react";
import { SWRConfig } from "swr";

const App = () => {
  return (
    <SWRConfig
      value={{
        onError: (error, key) => {
          if (error.status !== 403 && error.status !== 404) {
            // We can send the error to Sentry,
            // or show a notification UI.
          }
        }
      }}
    >
      <MyApp />
    </SWRConfig>
  );
};

Pruébelo para usar SWR, mejorará el rendimiento de su aplicación de muchas maneras.

En una aplicación React, usualmente usamos useState y fetch para obtener los datos y representar el contenido. Si usamos useSWR, proporciona un mejor rendimiento al proporcionar los datos de la caché, luego envía una llamada para verificar y finalmente combina las dos fuentes de datos para la coherencia de los datos.

Sitio oficial: https://swr.vercel.app/