revalidatePath

revalidatePath permite purgar datos en caché bajo demanda para una ruta específica.

Es bueno saber:

revalidatePath solo invalida la caché cuando se visita la ruta incluida. Esto significa que llamar a revalidatePath con un segmento de ruta dinámica no activará inmediatamente muchas revalidaciones a la vez. La invalidación solo ocurre cuando se visita la ruta.

Actualmente, revalidatePath invalida todas las rutas en la Caché del Router en el lado del cliente (Client-side Router Cache) cuando se usa en una acción de servidor. Este comportamiento es temporal y se actualizará en el futuro para aplicarse solo a la ruta específica.

Usar revalidatePath invalida solo la ruta específica en la Caché de Ruta del lado del servidor (Server-side Route Cache).

Parámetros

revalidatePath(path: string, type?: 'page' | 'layout'): void;

path: Puede ser una cadena que represente la ruta del sistema de archivos asociada con los datos que deseas revalidar (por ejemplo, /product/[slug]/page), o el segmento de ruta literal (por ejemplo, /product/123). Debe tener menos de 1024 caracteres. Este valor distingue entre mayúsculas y minúsculas.
type: (opcional) Cadena 'page' o 'layout' para cambiar el tipo de ruta a revalidar. Si path contiene un segmento dinámico (por ejemplo, /product/[slug]/page), este parámetro es obligatorio. Si path se refiere al segmento de ruta literal, por ejemplo, /product/1 para una página dinámica (por ejemplo, /product/[slug]/page), no debes proporcionar type.

Retorno

revalidatePath no retorna ningún valor.

Ejemplos

Revalidar una URL específica

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/post-1')

Esto revalidará una URL específica en la próxima visita a la página.

Revalidar una ruta de página

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'page')
// o con grupos de rutas
revalidatePath('/(main)/blog/[slug]', 'page')

Esto revalidará cualquier URL que coincida con el archivo page proporcionado en la próxima visita a la página. Esto no invalidará páginas debajo de la página específica. Por ejemplo, /blog/[slug] no invalidará /blog/[slug]/[author].

Revalidar una ruta de layout

import { revalidatePath } from 'next/cache'
revalidatePath('/blog/[slug]', 'layout')
// o con grupos de rutas
revalidatePath('/(main)/post/[slug]', 'layout')

Esto revalidará cualquier URL que coincida con el archivo layout proporcionado en la próxima visita a la página. Esto hará que las páginas debajo con el mismo layout se revaliden en la próxima visita. Por ejemplo, en el caso anterior, /blog/[slug]/[another] también se revalidaría en la próxima visita.

Revalidar todos los datos

import { revalidatePath } from 'next/cache'

revalidatePath('/', 'layout')

Esto purgará la Caché del Router en el lado del cliente y revalidará la Caché de Datos en la próxima visita a la página.

Acción de servidor

'use server'

import { revalidatePath } from 'next/cache'

export default async function submit() {
  await submitForm()
  revalidatePath('/')
}

Manejador de ruta

import { revalidatePath } from 'next/cache'
import type { NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  const path = request.nextUrl.searchParams.get('path')

  if (path) {
    revalidatePath(path)
    return Response.json({ revalidated: true, now: Date.now() })
  }

  return Response.json({
    revalidated: false,
    now: Date.now(),
    message: 'Missing path to revalidate',
  })
}

import { revalidatePath } from 'next/cache'

export async function GET(request) {
  const path = request.nextUrl.searchParams.get('path')

  if (path) {
    revalidatePath(path)
    return Response.json({ revalidated: true, now: Date.now() })
  }

  return Response.json({
    revalidated: false,
    now: Date.now(),
    message: 'Missing path to revalidate',
  })
}

On this page