Root Layout and Page re-rendering after server action call

Question

Does anybody know why my page and root layout both re-render once I call a server action?

// app/layout.tsx

export const metadata: Metadata = defaultMetadata();
export const viewport: Viewport = defaultViewport;

export default async function RootLayout({ children }: { children: ReactNode }) {
  console.log('Root Layout');
  const session = await auth();

  return (
    <html lang="en">
      <body>
        <SessionProvider session={session}>
          <CookiesProvider>
            <GlobalProvider user={session?.user}>
              {children}
            </GlobalProvider>
          </CookiesProvider>
        </SessionProvider>
      </body>
    </html>
  )
}

// app/page.tsx
export const metadata: Metadata = defaultMetadata({
  title: "Profile",
});

export default async function Page() {
  console.log('Page');

  const session = await auth();
  if (!session) return notFound();

  return (
    ...
  )
}

The code which calls the server action is inside a client component in the page
Here is the console logs:

Sage Thrasher · Answer

Turns out the issue is because I'm using revalidateTag inside the server action.

I have a claim system where once users have a certain amount of points they can claim something. If the user does not have enough points, a different screen is shown to when they do have enough points. Once you click claim, an animation plays. The issue is that the animation plays for a second then the layout revalidates and the page changes back. How can i allow this screen to remain until the animation is complete then allow the layout to change?

Root Layout and Page re-rendering after server action call

1 Reply