RevalidateTags revalidating cache on every page refresh

[MikeDrenth]

In the added screenshot, you can see the log I see in Vercel. On every page refresh, for some reason, the cache is getting updated from every component fetch I do on the page.

In the code below, you can see how I use the fetch to fetch the components from our CMS. Has anyone here have had any issues like this before, and could tell me what I am doing wrong?

What I want to achieve is, that I can go to page clearcache/component-94358 and then it should revalidate the data from that component.

I am using nextje v14

export const fetchComponent = async (id: any, site: string) => {
  const accessToken = await getAccessToken(site);
  const locale = await getLocale();

  try {
    const response = await cachedFetch(`${API_URL}/website/components/${id}`, {
      next: { revalidate: revalidateTime, tags: [`component-${String(id)}`] },
      headers: {
        Authorization: `Bearer ${accessToken}`,
        "Accept-Language": locale,
      },
    });

    return response;
  } catch (error) {
    console.error(error, "error");
  }
};

export const getComponent = async (id: any, site: string) => {
  if (!site || !id)
    throw new Error(
      "getComponent: Geen geldige site, of component id opgegeven",
    );
  const response = await fetchComponent(id, site);
  if (!response || !response.ok) {
    throw new Error(
      `getComponent: Response is undefined status: ${response?.status}`,
    );
  }
  const { data } = await response.json();

  return data;
};

Then in my server side components, I fetch the component data like this.

    const [componentResult, { theme }] = await Promise.all([
      getComponent(id, site),
      getTheme(site),
    ]);

[icyJoseph]

I am not sure I understand 100% but, I wonder if the Authorization header is somehow at play here. Have you tried caching other kinds of data, without the Authorization header, and see if that works as you expect?

[MikeDrenth]

I don't really have anything that I fetch without the Authorization header. Needless to say, we currently have a revalidate tag, with a 900 seconds time, that works just fine.

Could try to fetch something randomly without Authorization header.