Una guía completa para la regeneración estática incremental (ISR) con Next.js

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • Listas de verificación de diseño de interfaz inteligente

  • Índice
    1. El problema con la generación de sitios estáticos
    2. Sistemas de gestión de contenidos (CMS)
    3. Regeneración estática incremental (ISR)
    4. Empezando
      1. Recuperacion de datos
      2. Generando caminos
    5. Compensaciones
      1. Representación del lado del servidor
      2. Generación de sitios estáticos
      3. Representación del lado del cliente
      4. Opciones de respaldo de ISR
    6. ISR: ¡No sólo almacenamiento en caché!
    7. Ejemplos de regeneración estática incremental
    8. Aprenda Next.js hoy
    9. Otras lecturas

    La regeneración estática incremental (ISR) es una nueva evolución de Jamstack, que le permite actualizar contenido estático al instante sin necesidad de una reconstrucción completa de su sitio. El enfoque híbrido de Next.js le permite utilizar ISR para comercio electrónico, páginas de marketing, publicaciones de blogs, medios respaldados por publicidad y más.

     

    Hace un año, Next.js 9.3 lanzó soporte para Static Site Generation (SSG), lo que lo convierte en el primer marco híbrido. En este momento, había sido un usuario feliz de Next.js durante algunos años, pero esta versión convirtió a Next.js en mi nueva solución predeterminada. Después de trabajar extensamente con Next.js, me uní a Vercel para ayudar a empresas como Tripadvisor y Washington Post a adoptar y escalar Next.js.

    En este artículo, me gustaría explorar una nueva evolución de Jamstack: la regeneración estática incremental (ISR) . A continuación encontrará una guía de ISR, que incluye casos de uso, demostraciones y compensaciones.

     

    El problema con la generación de sitios estáticos

    La idea detrás de Jamstack es atractiva: páginas estáticas pre-renderizadas que pueden enviarse a una CDN y estar disponibles globalmente en segundos. El contenido estático es rápido, resistente al tiempo de inactividad y los rastreadores lo indexan inmediatamente. Pero hay algunos problemas.

    Si adoptó la arquitectura Jamstack mientras creaba un sitio estático a gran escala, es posible que tenga que esperar horas para que se construya su sitio. Si duplica el número de páginas, el tiempo de construcción también se duplica. Consideremos Target.com . ¿Es posible generar estáticamente millones de productos con cada implementación?

    El problema con la generación de sitios estáticos: debido a que los tiempos de construcción escalan linealmente con el número de páginas, es posible que tenga que esperar horas para que se construya su sitio. ( Vista previa grande )

    Incluso si cada página se generara estáticamente en un tiempo poco realista de 1 ms, aún llevaría horas reconstruir todo el sitio . Para aplicaciones web grandes, elegir la generación completa de sitios estáticos no es un buen comienzo. Los equipos de gran escala necesitan una solución híbrida, personalizada y más flexible.

    Sistemas de gestión de contenidos (CMS)

    Para muchos equipos, el contenido de su sitio está desacoplado del código. El uso de un CMS sin cabeza permite a los editores de contenido publicar cambios sin involucrar a un desarrollador. Sin embargo, con los sitios estáticos tradicionales, este proceso puede resultar lento.

    Considere una tienda de comercio electrónico con 100.000 productos. Los precios de los productos cambian con frecuencia. Cuando un editor de contenido cambia el precio de los auriculares de 100 dólares a 75 dólares como parte de una promoción, su CMS utiliza un webhook para reconstruir todo el sitio. No es viable esperar horas para que se refleje el nuevo precio.

    Las construcciones largas con cálculos innecesarios también pueden generar gastos adicionales. Idealmente, su aplicación es lo suficientemente inteligente como para comprender qué productos cambiaron y actualizar esas páginas de forma incremental sin necesidad de una reconstrucción completa .

    Regeneración estática incremental (ISR)

    Next.js le permite crear o actualizar páginas estáticas después de haber creado su sitio. La regeneración estática incremental (ISR) permite a los desarrolladores y editores de contenido utilizar la generación estática por página, sin necesidad de reconstruir todo el sitio . Con ISR, puede conservar los beneficios de la estática mientras escala a millones de páginas.

     

    Las páginas estáticas se pueden generar en tiempo de ejecución (bajo demanda) en lugar de en tiempo de compilación con ISR. Al utilizar análisis, pruebas A/B u otras métricas, tiene la flexibilidad de hacer sus propias compensaciones en los tiempos de construcción.

    Considere la tienda de comercio electrónico de antes con 100.000 productos. A unos 50 ms realistas para generar estáticamente cada página de producto, esto llevaría casi 2 horas sin ISR . Con ISR podemos elegir entre:

    • Construcciones más rápidas
      Genere los 1000 productos más populares en el momento de la construcción. Las solicitudes realizadas a otros productos se perderán en caché y se generarán estáticamente bajo demanda: compilaciones de 1 minuto.
    • Mayor tasa de aciertos de caché
      Genere 10000 productos en el momento de la compilación, lo que garantiza que se almacenen en caché más productos antes de la solicitud del usuario: compilaciones de 8 minutos.

    La ventaja de ISR: tiene la flexibilidad de elegir qué páginas se generan en el momento de la compilación o bajo demanda. Elija entre (A) compilaciones más rápidas o (B) más caché. ( Vista previa grande )

    Veamos un ejemplo de ISR para una página de producto de comercio electrónico.

    Empezando

    Recuperacion de datos

    Si nunca antes ha usado Next.js, le recomiendo leer Introducción a Next.js para comprender los conceptos básicos. ISR utiliza la misma API Next.js para generar páginas estáticas: getStaticProps. Al especificar revalidate: 60, informamos a Next.js que utilice ISR para esta página.

    Un diagrama del flujo de solicitudes para la regeneración estática incremental. ( Vista previa grande )

    1. Next.js puede definir un tiempo de revalidación por página. Fijémoslo en 60 segundos.
    2. La solicitud inicial a la página del producto mostrará la página almacenada en caché con el precio original.
    3. Los datos del producto se actualizan en el CMS.
    4. Cualquier solicitud a la página después de la solicitud inicial y antes de 60 segundos se almacena en caché y es instantánea.
    5. Después de la ventana de 60 segundos, la siguiente solicitud seguirá mostrando la página almacenada en caché (obsoleta). Next.js desencadena una regeneración de la página en segundo plano .
    6. Una vez que la página se haya generado correctamente, Next.js invalidará el caché y mostrará la página del producto actualizada. Si falla la regeneración del fondo, la página antigua permanece inalterada.
    // pages/products/[id].jsexport async function getStaticProps({ params }) { return { props: { product: await getProductFromDatabase(params.id) }, revalidate: 60 }}

    Generando caminos

    Next.js define qué productos generar en el momento de la compilación y cuáles bajo demanda. Generemos solo los 1000 productos más populares en el momento de la compilación proporcionando getStaticPathsuna lista de los 1000 ID de productos principales. Korean Beauty

     

    Necesitamos configurar cómo Next.js “recurrirá” al solicitar cualquiera de los otros productos después de la compilación inicial. Hay dos opciones para elegir: blockingy true.

    • fallback: blocking(preferido)
      Cuando se realiza una solicitud a una página que no se ha generado, Next.js procesará la página en el servidor en la primera solicitud. Las solicitudes futuras entregarán el archivo estático desde la memoria caché.
    • fallback: true
      Cuando se realiza una solicitud a una página que no se ha generado, Next.js mostrará inmediatamente una página estática con un estado de carga en la primera solicitud. Cuando los datos terminen de cargarse, la página se volverá a representar con los nuevos datos y se almacenará en caché. Las solicitudes futuras entregarán el archivo estático desde la memoria caché.
    // pages/products/[id].jsexport async function getStaticPaths() { const products = await getTop1000Products() const paths = products.map((product) = ({ params: { id: product.id } })) return { paths, fallback: 'blocking' }}

    Compensaciones

    Next.js se centra ante todo en el usuario final. La “mejor solución” es relativa y varía según la industria, la audiencia y la naturaleza de la aplicación. Al permitir a los desarrolladores cambiar entre soluciones sin salir de los límites del marco, Next.js le permite elegir la herramienta adecuada para el proyecto.

    Representación del lado del servidor

    ISR no siempre es la solución adecuada. Por ejemplo, las noticias de Facebook no pueden mostrar contenido obsoleto. En este caso, querrás usar SSR y potencialmente tus propios cache-controlencabezados con claves sustitutas para invalidar el contenido. Dado que Next.js es un marco híbrido, usted mismo puede hacer ese compromiso y permanecer dentro del marco.

    // You can cache SSR pages at the edge using Next.js// inside both getServerSideProps and API Routesres.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate');

    SSR y el almacenamiento en caché perimetral son similares a ISR (especialmente si se utilizan stale-while-revalidateencabezados de almacenamiento en caché), siendo la principal diferencia la primera solicitud. Con ISR, se puede garantizar que la primera solicitud sea estática si se procesa previamente. Incluso si su base de datos deja de funcionar o hay un problema de comunicación con una API, sus usuarios seguirán viendo la página estática correctamente servida. Sin embargo, SSR le permitirá personalizar su página según la solicitud entrante.

    Nota : El uso de SSR sin almacenamiento en caché puede provocar un rendimiento deficiente. Cada milisegundo es importante a la hora de impedir que el usuario vea su sitio, y esto puede tener un efecto dramático en su TTFB (tiempo hasta el primer byte).

    Generación de sitios estáticos

    ISR no siempre tiene sentido para sitios web pequeños. Si su período de revalidación es mayor que el tiempo que lleva reconstruir todo su sitio, también puede utilizar la generación tradicional de sitios estáticos.

    Representación del lado del cliente

    Si usas React sin Next.js, estás usando renderizado del lado del cliente. Su aplicación presenta un estado de carga, seguido de una solicitud de datos dentro de JavaScript en el lado del cliente (p. ej. useEffect). Si bien esto aumenta sus opciones de alojamiento (ya que no es necesario un servidor), existen compensaciones.

     

    La falta de contenido pre-renderizado del HTML inicial conduce a una optimización de motores de búsqueda (SEO) más lenta y menos dinámica. Tampoco es posible utilizar CSR con JavaScript deshabilitado.

    Opciones de respaldo de ISR

    Si sus datos se pueden recuperar rápidamente, considere usar fallback: blocking. Entonces, no necesitas considerar el estado de carga y tu página siempre mostrará el mismo resultado (independientemente de si está en caché o no). Si la recuperación de datos es lenta, fallback: truele permite mostrar inmediatamente un estado de carga al usuario.

    ISR: ¡No sólo almacenamiento en caché!

    Si bien he explicado ISR a través del contexto de un caché, está diseñado para conservar las páginas generadas entre implementaciones. Esto significa que puede retroceder instantáneamente y no perder las páginas generadas anteriormente.

    Cada implementación puede estar codificada por una ID, que Next.js utiliza para conservar las páginas generadas estáticamente. Cuando retrocede, puede actualizar la clave para que apunte a la implementación anterior, lo que permite implementaciones atómicas. Esto significa que puede visitar sus implementaciones inmutables anteriores y funcionarán según lo previsto.

    • A continuación se muestra un ejemplo de cómo revertir código con ISR:
    • Inserta el código y obtiene un ID de implementación 123.
    • Su página contiene un error tipográfico "Revista Smshng".
    • Actualizas la página en el CMS. No es necesario volver a implementarlo.
    • Una vez que su página muestra "Smashing Magazine", persiste en el almacenamiento.
    • Insertas un código incorrecto e implementas el ID 345.
    • Vuelve al ID de implementación 123.
    • Todavía ves "Smashing Magazine".

    Las páginas estáticas revertidas y persistentes están fuera del alcance de Next.js y dependen de su proveedor de alojamiento. Tenga en cuenta que ISR difiere del procesamiento del servidor con Cache-Controlencabezados porque, por diseño, los cachés caducan. No se comparten entre regiones y se eliminarán al revertirse.

    Ejemplos de regeneración estática incremental

    La regeneración estática incremental funciona bien para comercio electrónico, páginas de marketing, publicaciones de blogs, medios respaldados por publicidad y más.

    • Demostración de comercio electrónico
      Next.js Commerce es un kit de inicio todo en uno para sitios de comercio electrónico de alto rendimiento.
    • Demostración de reacciones de GitHub
      Reaccione al problema original de GitHub y observe cómo ISR actualiza la página de inicio generada estáticamente.
    • Demostración de tweets estáticos
      Este proyecto se implementa en 30 segundos, pero puede generar estáticamente 500 millones de tweets bajo demanda usando ISR.

    Aprenda Next.js hoy

    Los desarrolladores y los equipos grandes están eligiendo Next.js por su enfoque híbrido y su capacidad de generar páginas bajo demanda de forma incremental. Con ISR, obtienes los beneficios de la estática con la flexibilidad del procesamiento del servidor. ISR funciona desde el primer momento usando next start.

    Next.js ha sido diseñado para una adopción gradual . Con Next.js, puede continuar usando su código existente y agregar tanto (o tan poco) React como necesite. Al comenzar poco a poco y agregar más páginas gradualmente, puede evitar descarrilar el trabajo de las funciones evitando una reescritura completa. Obtenga más información sobre Next.js y ¡feliz codificación para todos!

    Otras lecturas

    • Comenzando con Next.js
    • Comparación de métodos de estilo en Next.js
    • Cómo construir un servidor GraphQL usando rutas API de Next.js

    (vf, il)Explora más en

    • Siguiente.js
    • pila de mermelada
    • Generadores de sitios estáticos
    • javascript
    • Guías





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Una guía completa para la regeneración estática incremental (ISR) con Next.js

    Una guía completa para la regeneración estática incremental (ISR) con Next.js

    Implemente rápidamente. Implementar inteligentemente Listas de verificación de diseño de interfaz inteligente Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-una-guia-completa-para-la-regeneracion-estatica-incremental-isr-con-next-1092-0.jpg

    2024-05-21

     

    Una guía completa para la regeneración estática incremental (ISR) con Next.js
    Una guía completa para la regeneración estática incremental (ISR) con Next.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20