Next.js SWR (Obsoleto mientras se revalida) Introducción

State While Revalidate es la biblioteca React Hooks para la obtención remota de datos, creada por Zeit. Se utiliza para 

• Devuelve los datos del caché (obsoleto)
• Envía la solicitud de recuperación (revalidar), y luego
• Viene con los datos actualizados de nuevo.

Google dice sobre el concepto de SWR: 

 “Ayuda a los desarrolladores a equilibrar entre la inmediatez (cargar contenido almacenado en caché de inmediato) y la frescura (garantizando que las actualizaciones del contenido almacenado en caché se utilicen en el futuro). Si mantiene un servicio web o una biblioteca de terceros que se actualiza periódicamente, o si sus activos propios tienden a tener una vida útil corta, entonces la revalidación obsoleta puede ser una adición útil a sus políticas de almacenamiento en caché existentes”.

Un encabezado de respuesta de Cache-Control que contiene stale-while-revalidate también debe contener max-age, y la cantidad de segundos especificada a través de max-age es lo que determina la obsolescencia. Cualquier respuesta almacenada en caché más nueva que max-age se considera nueva y las respuestas almacenadas en caché más antiguas son obsoletas. En pocas palabras, SWR revalida automáticamente los datos desde el origen tan pronto como los datos se procesan desde el caché, esto hará que las páginas se reproduzcan mucho más rápido y, después de procesar la página, los datos se actualizan con la última.
 

Ventajas de SWR: además de las llamadas de API personalizadas y la integración de API REST, lo que viene con SWR de Zeit se describe a continuación.

• Revalidación de enfoque: cuando vuelve a enfocar una página o cambia entre pestañas en el navegador, SWR revalida automáticamente los datos.
• Navegación rápida : SWR revalida automáticamente los datos desde el origen tan pronto como los datos se procesan desde el caché.
• Recuperar en intervalo : SWR le dará la opción de recuperar datos automáticamente, donde la recuperación previa solo tendrá lugar del componente asociado con el gancho que está en la pantalla.
• Mutación local : Aplicar cambios a los datos localmente, es decir, siempre actualizados a los datos más recientes.
• Obtención dependiente : SWR le permite obtener datos que dependen de otros datos. Garantiza el máximo paralelismo posible (evitando cascadas), así como la recuperación en serie cuando se requiere una pieza de datos dinámicos para que ocurra la siguiente recuperación de datos.
• Escalable : SWR se escala extremadamente bien porque requiere muy poco esfuerzo para escribir aplicaciones que convergen automática y finalmente a los datos remotos más recientes.
   

Desventajas de la ROE: 

• Una desventaja importante de usar SWR es que puede llevar al usuario a buscar datos obsoletos, lo que puede ocurrir debido a la falta de una implementación adecuada de la API, un error al actualizar la información mostrada y posiblemente muchos otros.
• Además de crear una mala experiencia de usuario, ¡esta también puede ser la única razón del revés de una empresa! Imagine una empresa bien establecida en finanzas, ¿pueden permitirse que sus usuarios vean los datos obsoletos? No, y es por eso que se requiere una implementación y uso precisos de SWR.

Introducción a Next.js:

Next.js es un marco basado en reacción. Está basado en react, webpack y babel. Es conocido por su división automática de código, recarga de código activo (es decir, recarga tan pronto como se guardan los cambios) y, lo que es más importante, representación del lado del servidor. Esto coloca este marco encima de las strings de herramientas recomendadas sugeridas en la documentación de React.

Pasos tomados para configurar su proyecto next.js , dado que uno tiene instalado node & npm en su dispositivo. 

• Paso 1: verifique las versiones de Node y npm ejecutando el siguiente comando

  $node -v && npm -v

• Paso 2: cree un directorio y, después de llegar al directorio de destino en la terminal, realice

  $npm install --save next react react-dom

• Paso 3: Cree un archivo en index.js en la carpeta de páginas (básicamente pages/index.js), agregue el siguiente código y ejecute npm start para verlo en acción. 
   

// The code for pages/index.js
  
import React from'react'; 
import Link from'next/link';
  
export default class extends React.Component { 
    render() { 
        return ( { 
        <div> 
            <h1>Hello Geeks</h1> 
        </div> 
        ) 
    }   
} 

Usando Next.js con SWR para obtener una API: 

 Realizaremos una búsqueda de datos usando SWR e isomorphic-unfetch con el potente Next.js , las dos dependencias que deben instalarse (comandos proporcionados en el código).

// The code for /pages/index.js
  
/* Install by using the CLI - npm i swr */
import useSWR from 'swr'; 
  
import fetch from '../libs/fetch';
  
function StateNameAN () {
  const { data, error } = useSWR(
'https://gist.githubusercontent.com/shubhamjain/35ed77154f577295707a/raw/7bc2a915cff003fb1f8ff49c6890576eee4f2f10/IndianStates.json', fetch);
  /* In case API fails */
  if (error) return <div>failed to load</div> 
  
  /* While result API loads */
  if (!data) return <div>loading...</div> 
    
  /* After response from the API is received */
  return <div>Hello{' '}{data.AN}!</div> 
}
  
export default function IndexPage() {
  return (
    <div>
      <StateNameAN />
    </div>
  );
}

// The code for /libs/fetch.js
  
/* Install by using the CLI - npm i isomorphic-unfetch */
import fetch from 'isomorphic-unfetch'; 
  
export default async function (...args) {
  const res = await fetch(...args)
  return res.json()
}

Producción:

Hello Andaman and Nicobar Islands!