From 78329ec091eb2c472be09d63a328fd448ac44f36 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Fri, 4 Jul 2025 13:52:29 +0200 Subject: [PATCH] Added fix for FOUC problem --- apps/website/pages/_app.tsx | 5 +- apps/website/pages/_document.tsx | 64 ++++++++++++------------ apps/website/pages/createEmotionCache.ts | 6 +++ 3 files changed, 40 insertions(+), 35 deletions(-) create mode 100644 apps/website/pages/createEmotionCache.ts diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 447d1e4fb..fcfbae85a 100644 --- 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(); const [renderContent, setRenderContent] = useState(false); diff --git a/apps/website/pages/_document.tsx b/apps/website/pages/_document.tsx index dc9777919..ad7724e58 100644 --- 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 ; - }, - }); - - const initialProps = await Document.getInitialProps(ctx); - const emotionStyles = extractCriticalToChunks(initialProps.html); - const emotionStyleTags = emotionStyles.styles.map((style) => ( -