Best Practice to fetch globals in Next Application

Hey guys I am struggling a bit to get my head around an elegant way on how to fetch my globals in a Next application. I currently have a custom _app.tsx with getInitialProps where I do some async fetching to the Payload Rest API passing down the data to my global components e.g Header similar to the way it is implemented in the tutorial series

. Now I was thinking about fetching the globals in each component in the useEffect hook instead of doing it in the custom app component to avoid passing down props and keep everything more isolated and I wanted to here about common solutions the community is handling globals fetching.

Using getInitialProps also leading to this warning: "Warning: You have opted-out of Automatic Static Optimization due to

in

." Which concerns me although I am using SSR anyway.

currently in _app.tsx

MyApp.getInitialProps = async (appContext) => {
  [...]

  const getGlobals = (slug: string) => {
    return fetch(
      `${process.env.NEXT_PUBLIC_SERVER_URL}/api/globals/${slug}?locale=${locale}`
    ).then((res) => res.json());
  };

  const [header, footer, social, settings] = await Promise.all([
    getGlobals("header"),
  ]);

  return { ...appProps, header };
};