Next.js 38: Revalidar después de una mutación
easy⏱ 5 mincoursenextjs
Decirle a Next.js que la caché está obsoleta
Next.js cachea agresivamente las rutas renderizadas y las llamadas a fetch(). Después de una mutación, llama a revalidatePath('/posts/1') para purgar la caché de esa ruta específica, o a revalidateTag('comments') para purgar cada fetch en caché etiquetado 'comments', sin importar cuántas rutas toque. Cualquiera de las dos llamadas al final de una Server Action hace que el siguiente render — muchas veces el mismo formulario que acabas de enviar — refleje los datos nuevos de inmediato.
'use server';
import { revalidatePath } from 'next/cache';
export async function addComment(postId: string, formData: FormData) {
const text = formData.get('comment');
await db.comment.create({ data: { postId, text } });
revalidatePath(`/posts/${postId}`); // this page re-fetches fresh data next render
}
revalidatePath vs revalidateTag
Usa revalidatePath cuando la mutación solo afecta a una ruta conocida. Usa revalidateTag cuando varias rutas distintas cachean los mismos datos subyacentes (etiqueta cada fetch relacionado con { next: { tags: ['comments'] } }) — una sola llamada a revalidateTag('comments') invalida todas a la vez, dondequiera que se rendericen.
Sin refetch ni recarga manual
Antes de las Server Actions, mantener la UI sincronizada tras una mutación significaba una recarga completa de página (window.location.reload() — lenta, pierde la posición del scroll) o sincronización de state manual y artesanal. La revalidación reemplaza ambas: el framework re-obtiene solo lo que está marcado como obsoleto, y React concilia la actualización de forma eficiente.
Entrega la funcionalidad completa de comentarios
Combina todo: valida name y comment en el 'servidor' y muestra errores en línea; muestra el comentario nuevo de forma optimista al instante en que se envía (estilo pendiente); deshabilita el formulario mientras la acción corre; y una vez que 'tiene éxito', simula revalidatePath releyendo la lista canónica de comentarios desde tu almacén de datos falso, para que la UI muestre exactamente lo que el 'servidor' tiene ahora. Mantén export default App.