Hi.
I have a layout where I have background component.

type Props = {
  children: React.ReactNode;
};

export default async function Layout({ children }: Props) {
  return (
    <div className="grid min-h-[100dvh] grid-cols-1 grid-rows-[min-content_1fr_min-content]">
      <SiteHeader />

      <div className="col-start-1 row-start-2 row-end-3 flex flex-1 flex-col justify-center px-4 pb-10 pt-14">
        <div className="flex w-full flex-col">{children}</div>

        <SiteFooter className="mt-6" />
      </div>
      <BackgroundGradient className="col-start-1 row-start-2 row-end-3" />
    </div>
  );
}

the background component can have different color depending on the result of a fetch.
The fetch is used with search params, so actually I do it in a page but I need this background in multiple page.

export default async function Page({
  params,
  searchParams,
}: {
  params: Params;
  searchParams: SearchParams;
}) {
  let branding: RegisterBranding | null = null;

  if (searchParams.token) {
    const res = await getRegisterDataFromToken(searchParams.token);

    if (res.data?.token.branding) {
      branding = res.data?.token.branding;
    }
  }

  return (
    // ...
  );
}

I know that I can create a client component and fetch client side on the layout, but I guess there will some sort of "flash".

the only solution that on my mind is to create a page component with the background and pass props to the component but then I will need to use it in each page.

Do you have any simpler solution maybe ? thx