Revalidating a GET endpoint in Next

Hey! Does anyone know how to revalidate a cached GET endpoint in Next? With this basic code cached/route.ts

export const GET = async (request: NextRequest) => {
  console.log("Getting /cached");
  const date = new Date();
  return NextResponse.json({ date });
};

export const GET = async (request: NextRequest) => {
  console.log("Getting /cached");
  const date = new Date();
  return NextResponse.json({ date });
};

reval/route.ts

export const dynamic = "force-dynamic";

export const GET = (req: NextRequest) => {
  console.log("Revalidating /cached");
  revalidatePath("/cached");
  revalidatePath("/cached-page");
  return NextResponse.json({ done: true });
};

export const dynamic = "force-dynamic";

export const GET = (req: NextRequest) => {
  console.log("Revalidating /cached");
  revalidatePath("/cached");
  revalidatePath("/cached-page");
  return NextResponse.json({ done: true });
};

cached-page/page.ts

export default function Page() {
  const date = new Date();
  return <div>{date.toString()}</div>;
}

export default function Page() {
  const date = new Date();
  return <div>{date.toString()}</div>;
}

The cached page revalidates fine, however the route handler does not. even calling revalidatePath("/", "layout") which should revalidate everything only does so for the page.

11 Replies

NotRebekahMikaelson™•9mo ago

to make GET request dynamic you need to use cookies() or headers() function see the screennshot according. to nextjs docs

NotRebekahMikaelson™•9mo ago

so for your case - cached/route.ts

import { cookies } from 'next/headers'

export const GET = async (request: NextRequest) => {
  console.log("Getting /cached");
  cookies()
  const date = new Date();
  return NextResponse.json({ date });
};

import { cookies } from 'next/headers'

export const GET = async (request: NextRequest) => {
  console.log("Getting /cached");
  cookies()
  const date = new Date();
  return NextResponse.json({ date });
};

reval/route.ts - not required cached-page/page.tsx

import { cookies } from 'next/headers'
export default function Page() {
  cookies()
  const date = new Date();
  return <div>{date.toString()}</div>;
}

import { cookies } from 'next/headers'
export default function Page() {
  cookies()
  const date = new Date();
  return <div>{date.toString()}</div>;
}

for the time being i am using cookies() but you can also use headers() as per your requirement ,both are exported from next/headers

jangladOP•9mo ago

yea I know you can make it dynamic like that but I want it to be static, but revalidate when the revalidatePath for it is called so like ISR for pages but seems like that's not possible for routes?

NotRebekahMikaelson™•9mo ago

to be honest i amnot sure but. surely you ca research and let. me. know

jangladOP•9mo ago

yeah I can not find anything about it literally only thing I can find about it is

well you can't use revalidate with route handlers, the api doesn't exist yet

on the next discord also find it so weird that nobody has run into this before, but maybe I just suck at googling

Huilen•9mo ago

have you tried this?https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data

Data Fetching: Fetching, Caching, and Revalidating | Next.js

Learn how to fetch, cache, and revalidate data in your Next.js application.

Huilen•9mo ago

export const revalidate = 3600 // revalidate at most every hour

export const revalidate = 3600 // revalidate at most every hour

NotRebekahMikaelson™•9mo ago

it. works for pages not for routes

jangladOP•9mo ago

It does work for routes, but this is just an interval and not on demand like revalidatepath

NotRebekahMikaelson™•9mo ago

oh i see

Gaming

Programming

Revalidating a GET endpoint in Next