Configuración de Incremental Static Generation en Next.js

Curso de Next.js: Sitios Estáticos y Jamstack

Contenido del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

18
Despliegue de Next.js hacia Producción: Variables y Optimización
01:41 min

Bonus

19
Lectura de Archivos en Next.js con Node.js y File System
09:51 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:53

Configuración de Incremental Static Generation en Next.js

Curso de Next.js: Sitios Estáticos y Jamstack

Clase 13 de 19

Clase 13 / 19

Recursos

¿Qué es el Incremental Static Generation en Next.js?

Next.js se ha convertido en uno de los frameworks más populares de React gracias a su capacidad de innovación constante y a las funciones avanzadas que ofrece, como el Incremental Static Generation (ISG). Esta técnica permite mejorar notablemente el rendimiento de las aplicaciones al generar de manera incremental las páginas estáticas. Así, no solo se beneficia la velocidad de carga, sino también la experiencia del usuario final, haciendo este proceso mucho más sencillo en comparación con otros frameworks.

¿Cómo habilitar el Incremental Static Generation?

Es importante entender que el ISG no solo es una mejora técnica, sino que puede implementarse de manera simple. Para habilitarlo, necesitas ajustar las propiedades de tu componente en el método getStaticProps, donde se debe utilizar la propiedad revalidate para determinar cada cuánto deseas refrescar una página. Por ejemplo, un valor de 5 * 60 hará que la página se actualice cada cinco minutos. Esta configuración es aplicable a ambas, la página principal y las demás páginas de su sitio.

export async function getStaticProps() {
  // Otra lógica...
  return {
    props: {
      // Propiedades...
    },
    revalidate: 5 * 60, // Reactualiza cada 5 minutos
  };
}

¿Qué sucede detrás de escena en Next.js?

Cuando compilas el proyecto para producción, utilizando comandos como yarn build, Next.js genera un resumen donde indica que las páginas están usando ISG o SSG (Static Site Generation). La salida en el directorio .next te muestra los archivos HTML y JSON que Next.js ha prerenderizado, concuerdan con el número de páginas que has instruido crear en getStaticPaths.

Ejecución en producción

Al iniciar el servidor en modo producción con yarn start, observarás que las páginas cargan más rápido. Al interactuar con la página, sigue funcionando eficientemente, lo cual es un claro indicativo de que el ISG está optimizando la entrega de contenido.

¿Qué ocurre con las páginas nuevas?

Un aspecto fascinante del ISG es su capacidad para manejar de manera elegante las solicitudes de páginas que no han sido prerenderizadas. Por ejemplo, si se visita una página que no está dentro de las prerenderizadas, Next.js la genera automáticamente en segundo plano y la guarda, además de mostrarla al usuario. Así, al volver a revisar el directorio .next, la nueva página estará presente como HTML ya renderizado. Este proceso es otro ejemplo del poder del Incremental Static Generation, que nos permite manejar eficientemente un gran volumen de contenido.

Este marco ofrece la capacidad de ajustar la estrategia Fallback que define cómo manejar páginas que aún no han sido generadas, ya sea de una manera bloqueante o con diferentes valores que se explorarán en profundidad posteriormente. El revalidate es un parámetro clave en este proceso, ya que determina cada cuánto Next.js debe ir al servidor para refrescar las páginas y mantener el contenido actualizado.

Con estas herramientas, Next.js se asegura de proporcionar un rendimiento óptimo y una escalabilidad robusta, ideal para proyectos dinámicos y de gran escala. ¡Sigue explorando Next.js y aprovecha al máximo sus capacidades innovadoras!

Pol Valle

Hace 3 años

hacemos cambios en:

index.tsx

export const getStaticProps: GetStaticProps<HomeProps> = async () => {
  
  const plants = await getPlantList({limit:10})

  return{
    props: {plants},
    revalidate: 5 * 60 // Refresh cada 5 minutos
  }
}

[slug].tsx

export const getStaticProps: GetStaticProps<PlantEntryProps> = async ({ params }) => {
    const slug = params?.slug;

    // Comprueba si el slug es de tipo string, si no, devuelve notFound.
    if (typeof slug !== 'string'){
     return { notFound: true }   
    }

    // Intenta obtener los datos de la planta, otras entradas y categorías. Si falla, devuelve notFound.
    try{
        const plant = await getPlant(slug)
        const otherEntries = await getPlantList({ limit: 5})
        const categories = await getCategoryList({ limit: 10})
        
        return {
            props: {
                plant,
                otherEntries,
                categories
            },
            revalidate: 5 * 60 // Refresh cada 5 min
        } 
    }catch(error) {
        return {
            notFound: true
        }
    }
}

// Esta función determina todas las rutas que se pre-renderizarán en tiempo de construcción.
export const getStaticPaths = async () => {
    // Aquí obtenemos la lista de plantas para luego generar las rutas.
    const entries = await getPlantList({limit:10})

    // Creamos la lista de rutas a partir de la lista de plantas.
    const paths: PathType[]= entries.map(plant => ({
        params: {
            slug: plant.slug
        } 
    }))

    // Devolvemos la lista de rutas y establecemos el fallback en false, lo que significa que si se intenta acceder a una ruta que no está en la lista, se mostrará una página 404.
    return {
        paths,
        fallback: 'blocking'
    }
}

Con esto ya tendriamos configurado el incremental static generatoin

una vez configurado, haremos un build del proyecto

Una vez lo hagamos, veremos que tenemos una nueva carpeta en:.next/server/pages/entry

doplax:platzi-plantpedia/ (dev✗) $ ls .next/server/pages/entry/      [20:52:51]
'[slug].js'
 decorate-your-stairwell-with-plants.html
 decorate-your-stairwell-with-plants.json
 houseplants-at-ikea.html
 houseplants-at-ikea.json
 how-i-propagated-my-indoor-climbing-plant.html
 how-i-propagated-my-indoor-climbing-plant.json
 how-to-care-for-your-houseplants-in-the-spring.html
 how-to-care-for-your-houseplants-in-the-spring.json
 how-to-not-kill-your-succulent.html
 how-to-not-kill-your-succulent.json
 how-to-water-your-plants.html
 how-to-water-your-plants.json
 prettiest-climbing-houseplants-with-vines.html
 prettiest-climbing-houseplants-with-vines.json
 rare-plants-the-impact-of-seeking-the-desirable.html
 rare-plants-the-impact-of-seeking-the-desirable.json
 the-best-plants-for-valentines-day.html
 the-best-plants-for-valentines-day.json
 which-watering-can-is-the-best-one.html
 which-watering-can-is-the-best-one.json

Cuando desde la web se accedan a paginas que nos estén aquí, se creará su fichero correspondiente

Comentarios (16)16 comentarios

Fernando Quinteros Gutierrez

Hace 5 años

Pablo Orozco Monte

Company_admin

Brandon Vargas Frias

Christian Boffill

Jhunior Eduardo Guevara Lázaro

Hace 4 años

Andres Rodriguez

Diego Reyes Cabrera

Andres Bustamante Pacheco

Luis Berenguer

Axlin Miranda

Bethsy Falcon

Jonathan 🦑 Alvarez

Profesor

Elioenai Garcia

Adan Uri Plata Estrada

Jair Neri

Rodrigo Loy

Introducción: rendering modes de Next.js

Creación de sitios estáticos con Next.js y Jamstack

Modos de Rendering en Next.js: Cliente, Servidor y Estático

Arquitectura del proyecto

Arquitectura Jam Stack con Next.js y GraphQL

Configuración de Contentful: Creación de Cuenta y API Tokens

Importación de Datos y Configuración en Contentful

Configuración y uso inicial de un proyecto Next.js con Contentful

Uso de GraphQL y Autogeneración en Next.js con Contentful

Static Generation

Renderizado de Listas con Next.js y Contentful

"Uso de getStaticProps en Next.js para Renderizado en Servidor"

Páginas Dinámicas en Next.js: Renderizado de Plantas y Entradas

Uso de getStaticPaths y getStaticProps en Next.js para páginas dinámicas

Ventajas y desventajas de Static Site Generation en Next.js

Incremental Static Generation

Configuración de Incremental Static Generation en Next.js

Uso del Fallback en Next.js: Estrategias y Aplicaciones

Estrategia Stale-While-Revalidate en Next.js

Ventajas y desventajas del Incremental Static Generation en Next.js

Server Side Rendering con Next.js: Ventajas y Desventajas

Siguientes pasos

Despliegue de Next.js hacia Producción: Variables y Optimización

Bonus

Lectura de Archivos en Next.js con Node.js y File System

Configuración de Incremental Static Generation en Next.js

Progreso del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

Bonus

Recursos

Recursos