How can I force a page to revalidate after receiving a 404 error from an API?

[avt00]

Summary

I'm currently working with a third-party API that I have no control over, which provides data for my project. Sometimes, this API can delete or make certain records unavailable, which leads to 404 responses.

I've encountered a problem where outdated content from the data cache still shows up on my website. This happens because the revalidation strategy of Next.js does not cater to requests returning a 404 error from an API. So, I'm looking for ways to either proactively trigger cache revalidation or clear the cache for certain paths.

Here's a piece from the Next.js documentation:

"If an error is thrown while attempting to revalidate data, the last successfully generated data will continue to be served from the cache. On the next subsequent request, Next.js will retry revalidating the data."

What this means is my app continues to display pages that no longer exist since they're being served from the cache, regardless of the API returning a 404 error for those items. Also, the fetch() I perform from my server component shows a status 200. I'm unable to figure out a method to be notified when a page is no longer available on the API. I'm aware that "revalidatePath" exists but it's pretty much useless since fetch() seems to return a false 200 status response.

Additional information

No response

Example

No response

[mroutadi]

@avt00 did you find the answer?

[avt00]

No. This issue is still relevant.

[petr-like]

@avt00 any updates? Have same issue.

[avt00]

No. This issue is still relevant.

[sabrinalord]

Im also having the same issue

[InJaEE]

I have the same problem.
I'm trying to bypass it by not calling the API directly, but using route to act as a proxy and revalidate the cache on error.

[avt00]

Can you elaborate on that and give me an example, please?

[InJaEE]

Here's a simple code example
When you call the API, you don't call it directly, you call it through the route handler in nextjs.
(if the call URL is “https://www.demo.com/article/recommended”, we call /api/proxy/article/recommended and the route handler actually makes the request to the target)

And if the request fails, the catch clause will call the revalidate tag API (another route handler) for the target API.

This way, when we get a 404 response from the API, even if it's cached, we'll initialize the next cache so that the user will be able to handle the 404 on the second request.

// src/app/api/proxy/[...slug]/route.ts
const GET = async (request: NextRequest, { params }: { params: { slug: string[] } }) => {
  const searchParams = request.nextUrl.searchParams.toString();
  const targetUrl = `${apiUrl}/${(await params.slug).join('/')}${searchParams}`;

  if (!targetUrl) {
    return NextResponse.json({ error: 'Target URL is required' }, { status: 400 });
  }

  try {
    const response = await fetch(targetUrl, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
      cache: 'no-store',
    });

    const data = await response.json();

    if (!response.ok) {
      throw new NextFetchError({ url: response.url, status: response.status, body: data });
    }

    return NextResponse.json(data);
  } catch (error) {
    const targetTag = getTag(targetUrl);

    if (isNextFetchError(error)) {
      const status = error.response?.status ?? 400;

      if (targetTag && inRange(status, 400, 500)) {
        await fetch(`${localApiBaseURL}/api/revalidate/tag`, {
          method: 'POST',
          cache: 'no-store',
          body: JSON.stringify({ target: targetTag }),
        });
      }

      return NextResponse.json(error.response?.body, { status });
    }

    return NextResponse.json({ error: 'Unexpected Error' }, { status: 400 });
  }
};