Exhaustive list of causes for app/layout re-render in production #71494

amplicity · 2024-10-18T18:33:35Z

amplicity
Oct 18, 2024

I'm using next 14.2 and having a hard time understanding exactly what causes the app/layout to re-render. I'll paint the general picture of our app below.

Root layout
app/layout

export default async function RootLayout({ children }: RootLayoutProps) {
  const session = await auth();

  return (
    <html lang="en" className="h-full">
      <body className={cn('font-sans antialiased', fontSans.variable, fontMono.variable, 'h-full')}>
        <MantineProvider theme={theme} defaultColorScheme="dark">
          <ProvidersWrapper session={session}>
            <ColorSchemeScript defaultColorScheme="dark" />
            <main className="h-auto bg-white-fff">{children}</main>
          </ProvidersWrapper>
        </MantineProvider>
      </body>
    </html>
  );
}

Most of our routes in our app are dynamic because they depend on user data, but they all use a shared layout, app/app/layout

Shared layout for all nested layouts
app/app/layout

import '@/app/globals.css';
import Sidebar from '@/components/sidebar';

interface AppLayoutProps {
  children: React.ReactNode;
}

export default async function AppLayout({ children }: AppLayoutProps) {
  return (
    <>
      <div className="relative h-full flex flex-row">
        <Sidebar />
        <div className="h-auto flex-auto">{children}</div>
      </div>
    </>
  );
}

I'm aware of the following scenarios causing a server component to re-render:

Its props change
Its parent re-executes
Router Cache expires (30 seconds for dynamic routes)
layout changes (outside of nested layout).

I have a case where we call a server action (a serverside function) from a client component. This client's closest layout is /app/app/route1/[id]/layout. We have a router.push(/app/app/route1/item/${itemId}). At this time, i'll sometimes see an app/layout re-render. The user has not signed in/signed out, so session should be unaffected (we're using next auth). Outside of number 3, which i've timed and does not appear to be the case, I am not seeing a reason this should cause an app/layout re-execution.

The page it navigates to /app/app/route1/item/[id] is 'use client'. The component does perform a server-side fetch, wrapped in an action, wrapped in a useEffect. The action is imported from a ./actions file. The fetch has 'no-store', but from the documentation, this would appear to only cause a client-rerender.

    const response = await fetch(process.env.URL + '/my_route/' + id || '', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'X-Request-Id': requestId,
      },
      cache: 'no-store',
    });

The only way I can consistently get the re-execution to happen is by changing the route mid-request. IE spamming a button or clicking 'back' as soon as the request flow starts. This definitely forces a re-execution. I have not seen anything about this behavior in documentation, so I'd like to understand both this behavior and any other expectations of re-execution with app/layout. I've read through this and this, but I'm not seeing this behavior described anywhere, I also would like to know exhaustively what causes app/layout to re-render, so we can be aware of it during development.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Exhaustive list of causes for app/layout re-render in production #71494

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Exhaustive list of causes for app/layout re-render in production #71494

Uh oh!

amplicity Oct 18, 2024

Replies: 0 comments

amplicity
Oct 18, 2024