Merge pull request #2252 from dxc-technology/Mil4n0r/fix-fouc-cache

Jialecl · web-flow · commit 4f3148abe445 · 2025-07-04T14:00:42.000+02:00
Added fix for FOUC problem
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
@@ -10,8 +10,8 @@ import { LinksSectionDetails, LinksSections } from "@/common/pagesList";
 import Link from "next/link";
 import StatusBadge from "@/common/StatusBadge";
 import "../global-styles.css";
-import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
+import createEmotionCache from "./createEmotionCache";
 
 type NextPageWithLayout = NextPage & {
   getLayout?: (_page: ReactElement) => ReactNode;
@@ -20,9 +20,8 @@ type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
-const clientSideEmotionCache = createCache({ key: "css", prepend: true });
-
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
+  const clientSideEmotionCache = createEmotionCache();
   const getLayout = Component.getLayout || ((page) => page);
   const componentWithLayout = getLayout(<Component {...pageProps} />);
   const [renderContent, setRenderContent] = useState(false);
diff --git a/apps/website/pages/_document.tsx b/apps/website/pages/_document.tsx
@@ -1,38 +1,9 @@
-import Document, { Head, Html, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from "next/document";
 import createEmotionServer from "@emotion/server/create-instance";
-import React from "react";
-import createCache from "@emotion/cache";
+import createEmotionCache from "./createEmotionCache";
+import * as React from "react";
 
 export default class MyDocument extends Document {
-  static async getInitialProps(ctx: any) {
-    const originalRenderPage = ctx.renderPage;
-
-    const cache = createCache({ key: "css", prepend: true });
-    const { extractCriticalToChunks } = createEmotionServer(cache);
-
-    ctx.renderPage = () =>
-      originalRenderPage({
-        enhanceApp: (App: any) =>
-          function EnhanceApp(props: any) {
-            return <App emotionCache={cache} {...props} />;
-          },
-      });
-
-    const initialProps = await Document.getInitialProps(ctx);
-    const emotionStyles = extractCriticalToChunks(initialProps.html);
-    const emotionStyleTags = emotionStyles.styles.map((style) => (
-      <style
-        data-emotion={`${style.key} ${style.ids.join(" ")}`}
-        key={style.key}
-        dangerouslySetInnerHTML={{ __html: style.css }}
-      />
-    ));
-
-    return {
-      ...initialProps,
-      styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
-    };
-  }
   render() {
     return (
       <Html lang="en">
@@ -45,3 +16,32 @@ export default class MyDocument extends Document {
     );
   }
 }
+
+MyDocument.getInitialProps = async (ctx) => {
+  const originalRenderPage = ctx.renderPage;
+
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache);
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App: any) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />;
+        },
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+  const emotionChunks = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = constructStyleTagsFromChunks(emotionChunks);
+
+  return {
+    ...initialProps,
+    styles: (
+      <>
+        {initialProps.styles}
+        <style data-emotion={`css`} dangerouslySetInnerHTML={{ __html: emotionStyleTags }} />
+      </>
+    ),
+  };
+};
diff --git a/apps/website/pages/createEmotionCache.ts b/apps/website/pages/createEmotionCache.ts
@@ -0,0 +1,6 @@
+import createCache from "@emotion/cache";
+import type { EmotionCache } from "@emotion/utils";
+
+export default function createEmotionCache(): EmotionCache {
+  return createCache({ key: "css", prepend: true });
+}
