Revalidación de Caché en Next.js: Endpoints por Tag y Path

Jose Tellez

student•

Lo de revalidar es absolutamente genial.

.

Es la forma de hacer dinamicas paginas estaticas aprovechandonos de las bondades de tener cache en todo, tal como lo hace next.

,

Porque la idea es entonces revalidar por tag (que es más granular, es decir, más preciso al fetch especifico) o por path (que revalida toda la pagina) cuando haya un evento que cambie la información que se muestra.

.

Ejemplo: Digamos que tienes un formulario que crea un nuevo comentario en un blog.

.

Cuando envias el form, es la señal para guardar ese comentario en la base de datos, revalidar el fetch que trae los comentarios y mostrar información actualizada.

Jorge Morales

student•

En Next.js, los mecanismos revalidateTag y revalidatePath son herramientas útiles para invalidar la caché de datos y mantener la información actualizada en tu aplicación.

revalidateTag:

Se utiliza para invalidar la caché de datos asociada a un etiqueta específica.

Es ideal para escenarios donde compartes datos entre múltiples rutas o componentes, y deseas actualizarlos de manera centralizada.

Ejemplo: Imaginemos una tienda online donde el catálogo de productos se comparte en diferentes páginas. Al actualizar el catálogo, puedes usar revalidateTag para invalidar la caché de todas las páginas que lo utilizan.

revalidatePath:

Se enfoca en invalidar la caché de datos para una ruta específica.

Es útil cuando deseas actualizar los datos de una ruta individual, sin afectar otras partes de la aplicación.

Ejemplo: En un blog, al publicar un nuevo artículo, puedes usar revalidatePath para invalidar la caché de la página del artículo recién publicado.

Dany Ruddy Huayhua Huayhua

student•

Para los que vienen de NextJs v.15

Agreguen el segundo parametro 'layout'

revalidatePath(path, 'layout');

Yan Arlex Vallejo Rosas

student•

Este procedimiento es el equivalente al proceso que haciamos en la version 12?, donde solo agregaabamos

revalidate: 10, // In seconds

en getStaticProps ?

Lo de revalidar es absolutamente genial.

.

Es la forma de hacer dinamicas paginas estaticas aprovechandonos de las bondades de tener cache en todo, tal como lo hace next.

,

Porque la idea es entonces revalidar por tag (que es más granular, es decir, más preciso al fetch especifico) o por path (que revalida toda la pagina) cuando haya un evento que cambie la información que se muestra.

.

Ejemplo: Digamos que tienes un formulario que crea un nuevo comentario en un blog.

.

Cuando envias el form, es la señal para guardar ese comentario en la base de datos, revalidar el fetch que trae los comentarios y mostrar información actualizada.

En Next.js, los mecanismos revalidateTag y revalidatePath son herramientas útiles para invalidar la caché de datos y mantener la información actualizada en tu aplicación.

revalidateTag:

Se utiliza para invalidar la caché de datos asociada a un etiqueta específica.

Es ideal para escenarios donde compartes datos entre múltiples rutas o componentes, y deseas actualizarlos de manera centralizada.

Ejemplo: Imaginemos una tienda online donde el catálogo de productos se comparte en diferentes páginas. Al actualizar el catálogo, puedes usar revalidateTag para invalidar la caché de todas las páginas que lo utilizan.

revalidatePath:

Se enfoca en invalidar la caché de datos para una ruta específica.

Es útil cuando deseas actualizar los datos de una ruta individual, sin afectar otras partes de la aplicación.

Ejemplo: En un blog, al publicar un nuevo artículo, puedes usar revalidatePath para invalidar la caché de la página del artículo recién publicado.

Para los que vienen de NextJs v.15

Agreguen el segundo parametro 'layout'

revalidatePath(path, 'layout');

Este procedimiento es el equivalente al proceso que haciamos en la version 12?, donde solo agregaabamos

revalidate: 10, // In seconds

en getStaticProps ?

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Implementación de Root Grouping en Next.js

Manejo de Errores en Next.js con React Error Boundary

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrado Dinámico de Productos en Shopify mediante API Collections

Uso de searchParams y params en componentes React cliente-servidor

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Solución de errores de hidratación en carritos con Next.js y Shopify

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Análisis de Bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components