help understand invalidatePath

[elfin hare]

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).

[shy valley]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[finite anchor]

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.

[elfin hare]

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?

[finite anchor]

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

[elfin hare]

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

[finite anchor]

If validateRequest is using the cookies() function inside then the page is Dynamic and does not need revalidation. It always shows the newest data.

[elfin hare]

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;
  }
);

[finite anchor]

What happens when you remove the cache wrapper?

cookies and cache does not go wel togheter most of the time.

[elfin hare]

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

[finite anchor]

Is it data you fetched with trpc on the client you want to revalidate?

[elfin hare]

TRPC makes the mutation on the backend's database

the server-side component on the home page fetches the data from the db

[finite anchor]

So no fetching with TRPC

Only mutating