Next.js Discord

Discord Forum

revalidateTag refresh whole page

Unanswered
African Slender-snouted Crocodil… posted this in #help-forum
Open in Discord
African Slender-snouted CrocodileOP
Hi, I'm writing an app in Next 14.2.5 using the app directory and I've encountered quite a strange behavior.

The application is very small, and its folder structure looks like this:

src/
    /app
        layout.tsx
        page.tsx
        settings
                page.tsx <- server component that calls getData.action.ts to fetch data and renders a client component
    /actions
        getData.action.ts // server action that fetches data from the API (GET)
        mutateData.action.ts // server action that sends data to the API (POST)
    /components
               Settings.view.tsx // client component rendering a button that calls the server action from mutateData.action.ts


A regular plain HTML button that is rendered in the client component Settings.view.tsx, after making an API call (mutateData.action.ts), calls revalidateTag, and now pay attention! revalidateTag() causes a full reload of the application! Exactly as if I used refresh() from the router or pressed F5 on keyboard.

A similar case, practically 1:1, was described by someone here: https://stackoverflow.com/questions/78741454/next-js-14-why-is-revalidatetag-acting-as-a-full-refresh-the-first-time-its-run

with the only difference that his problem was the loading.tsx file. I don't have that file, nor do I use Suspense. Does anyone know what might be the problem?

How to refresh server data without reload full page? i have some google analytics events in main layout.tsx file and revalidateTag() causes events to be resent which should not happen because i only mutate some data not refreshing the page

10 Replies

Spectacled bear
Are you calling revalidateTag in a server action?
In my experience, the whole page refresh only happens if you call it from a server action . Try doing this through a route handler.
African Slender-snouted CrocodileOP
yes, i am doing it in server action, should i move this somewhere else?
Spectacled bear
Yeah a route handler
Should not cause a refresh
It's not in the docs for some reason, but revalidation from a server action while in the route being revalidated causes a page refresh.
African Slender-snouted CrocodileOP
ok i will try
thanks bro
African Slender-snouted CrocodileOP
@Spectacled bear ok there is something I don't understand, I made a route handler that performs a query to the api, I used this route handler in my page.tsx file like this: 

   const resp = await fetch('http://localhost:3000/api/cart', {
        method: 'GET',
        next: { tags: ['cart'] },
    });


and additionally a route handler that revalidates this tag:

import { revalidateTag } from 'next/cache';

export async function POST() {
    

    revalidateTag('cart');

    return NextResponse.json({ revalidated: 'cart' });
}


and in the client side component when the button is clicked it calls the fetch method which revalidates the tag:

await fetch(`http://localhost:3000/api/revalidate`, { method: 'post' });


and the data I fetched in page.tsx does not refresh, what could be the issue?
i dont use now any server action