ISR es un método de representación híbrida en Next.js, que es útil para SEO y mejorar la experiencia del usuario. En este artículo, explicaré cómo funciona ISR en Next.js, mostraré ejemplos de implementación de ISR tanto en el enrutador de la página como en el enrutador de aplicaciones y, finalmente, abordar algunas preguntas comunes sobre ISR en Next.js.

¿Qué es ISR?

ISR es un método de representación híbrida en Next.js. Regenera páginas estáticas a intervalos específicos, lo que ayuda con el SEO y mejora la experiencia del usuario al mantener el contenido actualizado sin reconstruir todo el sitio.

¿Cómo mejora el ISR el SEO y la experiencia del usuario?

Si ha usado react.js o una aplicación tradicional de una sola página (SPA), sabe que generalmente solo hay un archivo HTML en un SPA. Cuando un usuario visita por primera vez un sitio web de SPA, el SPA envía un archivo HTML mínimo (en React, esto generalmente es index.html). Después de eso, obtiene CSS, JavaScript y otros recursos necesarios para la página solicitada. Estos recursos se representan y se combinan en el HTML una vez que llegan al cliente (el navegador). Sin embargo, como se mencionó anteriormente, el archivo HTML inicial enviado por un SPA contiene poco o ningún contenido.

Ahora, imagine un Google Bot solicitando el sitio web en lugar de un usuario. Si bien los bots modernos de Google pueden ejecutar JavaScript para recuperar el contenido, confiar únicamente en esto aún puede afectar negativamente el SEO. El bot podría ver el HTML inicial como vacío, lo que podría retrasar la indexación del contenido de la página, potencialmente dañar sus clasificaciones de búsqueda.

Next.js resuelve esto mediante el uso de técnicas de renderizado del lado del servidor, como la prejuicios previos del servidor. Hablaremos sobre la representación en detalle más tarde, pero aquí hay una breve descripción general. Con la pre-representación del servidor, el HTML para cada ruta se genera en el servidor y se envía directamente al cliente. Los archivos CSS y JavaScript generalmente se agrupan y almacenan en caché.

Entonces, cuando un usuario o Google Bot visita el sitio, ven inmediatamente una página completamente representada. Esto mejora el SEO porque el Google Bot puede ver instantáneamente el contenido en el HTML. También mejora la experiencia del usuario al acelerar las cargas de la página, lo que significa que los usuarios no tienen que esperar a que el contenido se cargue dinámicamente.

¿Cómo funciona ISR?

Si desea comprender mejor cómo funciona ISR (regeneración estática incremental), déjame explicarte con un ejemplo. Imagine que es un administrador que administra una lista de blogs en su sitio web. No querrás reconstruir tu proyecto cada vez que publiques un nuevo blog. En su lugar, desea que su página de la lista de blogs se actualice automáticamente, por ejemplo, cada 60 segundos. Entonces, cuando escribes un nuevo blog, quieres que aparezca sin reconstruir manualmente tu proyecto. Aquí es donde entra ISR. Si bien puede usar métodos como SSR (representación del lado del servidor), si desea que su sitio web se actualice a intervalos específicos, ISR es el camino a seguir. Hablaremos de SSR más tarde.

Ahora, supongamos que implementa ISR en su página de Lists de blogs y establece el tiempo de revalidación en 60 segundos. Usted construye su proyecto por primera vez y comienza el temporizador de revalidación. Un usuario visita su sitio web, va a la página de la lista de blogs y ve la lista actual de blogs. Mientras tanto, publica una nueva publicación de blog, pero debido a que todavía quedan 20 segundos en la ventana de 60 segundos, los nuevos usuarios que visitan el sitio todavía no verán el nuevo blog.

Una vez que los 60 segundos están activos, ISR verifica los nuevos datos, ve que hay una nueva publicación de blog y regenera la página estática con el contenido actualizado. Luego almacena la nueva versión en el servidor. Aquí hay algo importante para tener en cuenta: mientras ISR está regenerando la página, los usuarios aún ven la versión anterior hasta que la nueva esté lista. Entonces, después de que ISR termine, cualquier nuevo visitante verá la página actualizada, pero los usuarios que ya estaban en el sitio antes de la revalidación aún verán la página anterior a menos que la actualicen.

Otra cosa clave para recordar es que cuando construye su sitio web usando la compilación de NPM Run, SSG (Generación de sitios estática) genera la página estática inicial, no ISR. Después de la primera construcción, ISR entra en marcha para manejar el proceso de regeneración. Además, ISR no regenere todo su sitio; Solo regenera la página específica donde se implementa ISR. Entonces, cuando ISR se regenera, solo esa página específica se actualiza, no todo el proyecto.

Cómo implementar ISR en el enrutador de aplicaciones

Para implementar ISR (regeneración estática incremental) en el enrutador de aplicaciones, es importante saber que ISR debe usarse en componentes del servidor, no en componentes del cliente. Esto se debe a que ISR es un método de representación del servidor, no del lado del cliente. Por lo tanto, debe colocar ISR en archivos como App/Blog/Page.tsx o App/Blog/Page.jsx.

Un punto clave para recordar es que si no llama a su API en el componente del servidor donde se establece la opción Revalidate, ISR no funcionará. El componente del servidor debe poder obtener nuevos datos para regenerar la página, de lo contrario, no se producirán actualizaciones.

Para habilitar ISR, todo lo que necesita hacer es agregar la propiedad Revalidate al método de búsqueda. Si prefiere usar Axios en lugar de buscarlo, aún puede usarlo configurando la solicitud de manera similar, pero por ahora, me apegaré a usar Fetch. Tal vez más tarde explicaré cómo hacerlo con Axios.

proporcioné un ejemplo con el archivo TSX y JSX Fiel:

Este es un ejemplo de implementación en el archivo tsx

Este es un ejemplo de implementación en el archivo jsx:

¿Cómo implementar ISR en el enrutador de la página?

Para implementar ISR en el enrutador de la página, debe exportar GetStaticProps desde su componente y agregar la propiedad Revalidate a esta función. Esta función solo se ejecuta durante la representación del lado del servidor, por lo que debe asegurarse de llamar a su API dentro de GetstaticProps. Como se menciona en la sección anterior, puede usar Fetch o Axios para obtener sus datos, pero tenga en cuenta que la llamada API debe hacerse dentro de GetstaticProps, o de lo contrario ISR no funcionará.

Nuevamente, esta función se ejecuta en el servidor, no en el cliente. Aquí hay un ejemplo para demostrar:

Este es un ejemplo de implementación en el archivo tsx:

Este es un ejemplo de implementación en el archivo jsx:

Conclusión

ISR en Next.js es un método de representación del servidor que mejora la experiencia de SEO y del usuario.
Puede crear su componente utilizando otros métodos como SSR o SSG, pero a veces se necesita ISR para casos de uso específicos.

Debe tener una buena comprensión de lo que es ISR, cómo funciona y cómo implementarlo tanto en el enrutador de la página como en el enrutador de aplicaciones. En este artículo, he tratado de explicarlo con la mayor claridad posible, y lo actualizaré más tarde si puedo explicarlo aún mejor. Si algo no está claro, hágamelo saber dejando un comentario, y proporcionaré más aclaraciones.

¡Gracias por leer este blog, y espero que lo hayas disfrutado!