Next.js Discord

Discord Forum

help understand invalidatePath

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
I have two pages, settings and home.
the settings page is a client component and has a simple form calling an api route to mutate the user's username in the database.
on the home page, i'm using an async server component to load the user's username from database and give him a simple greeting

I'm unable to figure out how to use invalidatePath to purge the cache of the client side router so it can re-run the server-side component on the home page after mutating from the settings page.
Currently, if i mutate, the changes are not immediately reflected by the home page if i navigate to it (the old state is preserved and after some time on navigation it invalidates and gets the new data).

31 Replies

Barbary Lion
The invalidatePath function is used to invalidate and then re-generate a static page.

But when you use dynamic data for example, a session, cookie or params the page is not static but dynamic, wich means it is not cached and also does not need to be invalidated.

But if your home is a static page, you can call invalidatePath("/home") inside your API function on the server. That will invalidate and regenerate your home page.
American black bearOP
Ok but this seems weird
What if not only home but the home2 page also relied on that data
Can't i just tell the client side - router to purge all cached data?
Barbary Lion
If you use the fetch function in client side you can add tags, and invalidate those with invalidateTag function.

https://nextjs.org/docs/app/building-your-application/caching#revalidating-1
American black bearOP
Ughm, no
I'm using trpc and the tankstack query to mutate the data
and the home page i mentioned is just like this
export default async function Page() {
  const { user } = await validateRequest();
  if (!user) {
    redirect('/sign-in');
  }
  return (
    <section className="mx-auto flex max-w-[500px] flex-col items-center justify-center gap-y-4 text-center">
      <Heading type="h1" className="text-nowrap">
        Hi {user.username}!
      </Heading>

    </section>
  );
}
And validateRequest is just a simple function reading the cookies and calling the db if the auth_cookie is there to fetch the user
Barbary Lion
If validateRequest is using the cookies() function inside then the page is Dynamic and does not need revalidation. It always shows the newest data.
American black bearOP
That is not the behaviour i'm observing
Navigating between the settings and the home page only gives me this in the network tab
only the favicon is fetched for some reason?
and after some time
it fetches the fresh data
export const validateRequest = cache(
  async (): Promise<
    { user: User; session: Session } | { user: null; session: null }
  > => {
    const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null;
    if (!sessionId) {
      return {
        user: null,
        session: null
      };
    }

    const result = await lucia.validateSession(sessionId);
    // next.js throws when you attempt to set cookie when rendering page
    try {
      if (result.session?.fresh) {
        const sessionCookie = lucia.createSessionCookie(result.session.id);
        cookies().set(
          sessionCookie.name,
          sessionCookie.value,
          sessionCookie.attributes
        );
      }
      if (!result.session) {
        const sessionCookie = lucia.createBlankSessionCookie();
        cookies().set(
          sessionCookie.name,
          sessionCookie.value,
          sessionCookie.attributes
        );
      }
    } catch {
      //
    }
    return result;
  }
);
Barbary Lion
What happens when you remove the cache wrapper?
cookies and cache does not go wel togheter most of the time.
American black bearOP
Same behaviour
And if i can't use cache, i might as well not use nextjs anyway
my requests are gonna have insane waterfalls
Calling router.refresh client-side after the mutation seems to do the trick
Barbary Lion
Is it data you fetched with trpc on the client you want to revalidate?
American black bearOP
TRPC makes the mutation on the backend's database
the server-side component on the home page fetches the data from the db
Barbary Lion
So no fetching with TRPC
Only mutating
American black bearOP
yes