Usando Swr React Hooks Com Next.Js’S’Incremental Regeneración Estática (Isr)

Si ya ha utilizado la regeneración estática incremental (ISR) con Siguiente.js, es posible que se haya encontrado enviando datos obsoletos al cliente. Esto ocurre cuando está revalidando la página en el servidor. Para algunos sitios, esto funciona, pero para otros (como el libro de recuerdos de Hack Club, un sitio web creado por @ lachlanjc que ayudo a mantener), el usuario espera que los datos se mantengan actualizados.

La primera solución que viene a la mente puede simplemente representar las páginas del lado del servidor, asegurando que el cliente siempre recibirá los datos más actualizados. Sin embargo, recuperar los grandes bloques de datos antes de la representación puede disminuir la velocidad de la página de inicio. La solución utilizada en Scrapbook fue usar la biblioteca SWR de ganchos de raíces para actualizar la página de almacenamiento en caché del servidor con la búsqueda de datos del lado del cliente. Este enfoque garantiza que los usuarios tengan una buena experiencia, que el sitio sea rápido y que los datos se mantengan actualizados.

Cumplir con SWR

SWR es una biblioteca de ganchos de reacción construida por VERCEL, el nombre proviene del término Rancio mientras se revalide. Como su nombre sugiere, su cliente recibirá datos desactualizados / antiguos, mientras que se solicitan los datos más actualizados (revalidando) a través de SWR en el lado del cliente. Sin embargo, el SWR no revalide los datos solo, sin embargo, puede configurar el SWR para revalidar los datos en un rango cuando recupere la pestaña Focus cuando un cliente se vuelva a conectar a Internet o programáticamente.

Cuando se combina con las rutas API de ISR y NEXT.JS, SWR se puede usar para crear una experiencia de usuario sensible. El cliente primero recibe la página en caché estáticamente (generado con GetStaticProps ()), en el fondo, el servidor también inicia el proceso de revalidación de esta página (lea más aquí). Este proceso se ve rápido para el cliente y ahora puede ver el conjunto de datos, pero puede estar un poco desactualizado. Una vez que se carga la página, se realiza una solicitud de búsqueda para una ruta API de NEXT.JS desde la suya, lo que devuelve los mismos datos que se generaron con GetStaticProps (). Cuando se complete esta solicitud (suponiendo que ha sido exitoso), el SWR actualizará la página con estos nuevos datos.

Ahora veremos nuevamente el libro de recuerdos y cómo esto ayudó a resolver el problema de tener datos desactualizados en la página. Obviamente es que ahora el cliente recibe una versión actualizada. El más interesante, sin embargo, es el impacto en la velocidad en nuestro lado. Cuando medimos la velocidad a través del faro, obtenemos un índice de velocidad de 1.5 segundos para la variante ISR + SWR del sitio y 5.8 segundos para la variante de representación del lado del servidor (más un aviso en la inicial del servidor de tiempo de respuesta). Este es un contraste bastante fuerte entre los dos (y también fue notable al cargar las páginas). Pero también hay una compensación: en la página Renderizada del lado del servidor, el usuario no cambió el diseño del sitio después de unos segundos con la nueva entrada de datos. Aunque creo que el libro de recuerdos se ocupa de esta actualización, es una consideración importante al diseñar la experiencia del usuario.

Dónde usar SWR (y donde no hacer)

El SWR se puede colocar en una variedad de lugares. Aquí hay algunas categorías de sitio donde el SWR encajaría perfectamente:

sitios con datos activos que requieren actualización a un ritmo rápido. Los ejemplos de tales sitios serían sitios de meseta deportiva y seguimiento de vuelo. Cuando crea estos sitios, debe usar la opción de revalidación en el rango con una configuración de intervalo baja (de uno a cinco segundos). Sitios con una fuente de actualizaciones o publicaciones que se actualizan en tiempo real. El ejemplo clásico de esto sería los sitios de noticias que tienen blogs en vivo de eventos como elecciones. Otro ejemplo sería el libro de recuerdos mencionado anteriormente. En este caso, es probable que también desee utilizar la revalidar en la opción Rango, pero con una configuración de intervalo superior (treinta y seis segundos) para ahorrar en el uso de datos y evitar llamadas API innecesarias. Sitios con actualizaciones más pasivas de datos, que las personas se mantienen muy abiertas en el fondo. Los ejemplos de estos sitios serían las páginas del pronóstico del tiempo o las páginas del número de caso COVID-19 de las 2020. Estas páginas no se actualizan tan a menudo y, por lo tanto, no necesitan la revalidación constante de los dos ejemplos anteriores. Sin embargo, aún mejoraba la experiencia del usuario para que los datos se actualizaran. En estos casos, recomendaría revalidar la fecha en que la guía recupera el enfoque y cuando un cliente se vuelve a conectar a Internet, esto significa que si una persona regresa ansiosamente al grifo esperando solo un pequeño aumento en los casos covid, obtienen estos datos rápidamente. Sitios con pequeños datos con los que los usuarios pueden interactuar. Piense en los suscríbase a YouTube: haciendo clic en Suscribirse, desea ver el cambio en el conteo y la sensación de que hizo la diferencia. En tales casos, puede revalidar los datos programáticamente utilizando SWR para obtener el nuevo recuento y actualizar la cantidad mostrada.

Una cosa a tener en cuenta es que todos pueden aplicarse con o sin ISR.

Hay, por supuesto, algunos lugares donde no querrá usar SWR o usar SWR sin ISR. SWR no es muy útil si sus datos no están cambiando o cambian muy raramente y, en cambio, pueden obstruir sus solicitudes de red y usar datos de usuario móviles. Sin embargo, el SWR puede trabajar con páginas que requieren autenticación, querrá usar la representación del lado del servidor en estos casos y no la regeneración estática incremental.

Uso del SWR con Siguiente.js y la regeneración estática incremental

Ahora exploramos la teoría de esta estrategia, exploremos cómo lo ponemos en práctica. Para esto, construiremos un sitio web que muestre cuántos taxis están disponibles en Singapur (¡donde vivo!) Usando esta API proporcionada por el gobierno.

Estructura de diseño

Nuestro proyecto funcionará con tres archivos:

páginas LIB / ASPERS.JS Pages / index.js (nuestro archivo frontend) Páginas / API / index.js (nuestro archivo API)

El archivo de nuestros ayudantes exportará una función (gettaxidata) que buscará los datos de la API externa y luego los devolverá en un formato apropiado para nuestro uso. Nuestro archivo API importará esta función y establecerá su exportación predeterminada a una función de manipulador que llamará a la función GettaxiData y lo devolverá, esto significa que el envío de una solicitud de obtención de información a / API devolverá nuestros datos.

Necesitamos esta capacidad para que el SWR busque los datos del lado del cliente. Finalmente, en nuestro archivo front-end, importaremos gettaxidata y lo usaremos en GetStraticProps, sus datos se pasarán a la función de exportación predeterminada de nuestro archivo front-end que generará nuestra página de reacción. Hacemos todo esto para evitar la duplicación del código y garantizar la coherencia en nuestros datos. Qué boca completa, vamos a empezar a programar ahora.

Los ayudantes archivar

Comenzaremos creando la función gettaxidata en lib / helpers.js:

Exportar la función asíncrona gettaxidata () {deja datos = esperar Fetch («https://api.data.gov.sg/v1/transport/taxi-availability»).then (r = r.json ()) retorno {taxis: data.features.properties [0].taxi_count, ACTUdorestat: Fecha.Features.Properties [0].Timestamp}}

El archivo API

Luego, construiremos la función del manipulador en API / index.js, así como importar el Función Gettaxidata:

Importar {gettaxidata} de ‘../../ lib / helers’export predeterminado de la función asincrónica (Req, res) {res.status (200).json (Await gettaxidata () )}

No hay nada exclusivo aquí para SWR o ISR, además de la estructura del proyecto mencionado. ¡Esto comienza ahora en index.js!

El archivo front-end

Lo primero que queremos hacer es crear nuestra función de GetStaticProps! Esta función importará nuestra función GettaxiData, usarála y luego devolverá los datos con alguna configuración adicional.

Función asíncrona de exportación getstaticprops () {const {gettaxidata} = requieren («../lib/helpers») devuelva {accesseds: (Await gettaxidata ()), revalidate: 1}}

Me gustaría concentrarme en la clave de revalidación en nuestro objeto devuelto. Esta clave permite una regeneración estática prácticamente incremental. Informa a su anfitrión que cada segunda regeneración de la página estática es una opción disponible, esta opción se activa en segundo plano cuando un cliente visita su página. Puede leer más sobre la regeneración estática incremental (ISR) aquí.

¡Ahora es el momento de usar el SWR! Vamos a importarlo primero:

Importar usaWR de’swr ‘

Use SWR en nuestra función de renderización de reacción, por lo que vamos a crear esta función:

Función de exportar la aplicación predeterminada (Props) {}

Estamos recibiendo los accesorios de GetStaticProps. Ahora estamos listos para configurar el SWR:

const fetcher = (… args) = fetch (… args). Entonces (res = res.json ()) const {fecha} = USWR («/ API», Fetcher, {inicialData: Props, Refreshinterval: 30000})

Lo descompondremos. Primero, definimos el motor de búsqueda. Esto es requerido por SWR como un argumento para que él sepa cómo recuperar sus datos, ya que las diferentes estructuras, etc. Pueden tener diferentes configuraciones. En este caso, estoy usando la función proporcionada en la página Documento SWR. Luego llamamos al gancho de usos, con tres argumentos: la ruta desde dónde obtener datos, la función de búsqueda, y luego un objeto de opciones.

En este objeto de opciones, especificamos dos cosas:

Los datos iniciales El intervalo en el que el SWR debe revalidar los datos

los datos iniciales La opción es donde proporcionamos datos buscados para obtener datos, lo que garantiza que los datos sean visibles desde el principio. Finalmente, usamos la destrucción de objetos para extraer los datos del gancho.

Para terminar, haremos estos datos con algunos JSX muy básicos:

devolver

y podemos! Allí tenemos un ejemplo muy básico de usar SWR con regeneración estática incremental. (La fuente de nuestro ejemplo está disponible aquí).

Si ya ha realizado en datos obsoletos con ISR, usted sabe a quién llamar: SWR.

LECTURAS ADICIONALES EN SmashingMag

Una introducción a SWR: reaccionar ganchos para la búsqueda de datos remotos, Ibrahima Ndaw Isr vs DPR: Palabras grandes, explicación rápida, Cassidy Williams Global vs. Ubicación en Siguiente.js, Alexander Dubovoj Customer Side Enrutamiento en Siguiente.js, Adebiyi Adedotun Lukman

Compartir