I have a layout component that is loaded once on App.jsx and stays the same throughout the session, but since the page is SSRed it loads first, then the layout displays after a second, is there a way to get the layout data along with the page without having to add it to every page?

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
  const abortController = new AbortController();
  const signal = abortController.signal;
  const [content, setContent] = useState();
  const router = useRouter();
  console.log("url", router);
  useEffect(() => {
    const fetchUIContent = async () => {
      let data;
      let responseStatus;
      try {
        data = await axios.get("/api/layout", {
          httpsAgent: new https.Agent({ rejectUnauthorized: false }),
          signal: signal,
        });
        responseStatus = data.status;
      } catch (error) {
        if (error.name === "AbortError") return;
        console.log("Error message:", error.message);
      } finally {
        if (responseStatus == 200) {
          setContent(await data.data);
        } else {
          console.log("Oops error", responseStatus, "occurred");
        }
      }
    };

    fetchUIContent();

    return () => {
      abortController.abort();
    };
  }, []);
  return (
    <Provider store={store}>
      <SessionProvider session={session} /*option={{clientMaxAge: 10}}*/>
        <ConfigProvider direction="ltr">
          <HeadersComponent>
            <Layout content={content}>
              <Component {...pageProps} />
            </Layout>
          </HeadersComponent>
        </ConfigProvider>
      </SessionProvider>
    </Provider>
  );
}

I thought of using redux to get the layout data, but that would still need to make changes on each page and it is a pretty large project.