I'm building a relatively large web app with the next app router, and this is my first time with a project that requires complex state management. I'm hoping that someone may be able to help me with advice on best practices or other good resources as far as using react-query in tandem with next, I don't have a particular bug to point to.

As an example, this is the structure of the highest-level layout in the authenticated portion of the app.

export default async function AppLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  if (!(await userIsAuthenticated())) {
    log("This user is not signed in, redirect to login");
    redirect("/login");
  }

  const user = await fetchSignedInUser();

  return (
    <ReactQueryClientProvider>
      <UserProvider givenUser={user}>
        <LocalNavigationProvider>
          <HomeDeselectProjectProvider>
            <AlertProvider>
              <DropzoneProvider>
                <AmplifyAuthHubEventLogger />
                <DynamoSubscriptions />
                {children}
              </DropzoneProvider>
            </AlertProvider>
          </HomeDeselectProjectProvider>
        </LocalNavigationProvider>
      </UserProvider>
      <ReactQueryDevtools initialIsOpen={false} />
    </ReactQueryClientProvider>
  );
}

It does work, but I feel like it's inelegant. The user is fetched here, in the server component layout, and every component present here is a client component. Is there even a point to making this fetch happen on the server side?

The layout also constantly rerenders as resources are fetched with react-query, causing the user fetch to occur over and over again. Why? What dependencies cause a server component to rerun?

I know some of this would be answered through a better understanding of structure, so any advice or direction towards good resources to understand this would be helpful.

Thanks!