From 9d31d6e13b4cb394931c7336c9bd5c63e1af9401 Mon Sep 17 00:00:00 2001
From: Enrique Moreno Carmona <33158831+Mil4n0r@users.noreply.github.com>
Date: Fri, 4 Jul 2025 14:05:22 +0200
Subject: [PATCH] Revert "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, 35 insertions(+), 40 deletions(-)
delete mode 100644 apps/website/pages/createEmotionCache.ts
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
index fcfbae85a..447d1e4fb 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,8 +20,9 @@ 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 ad7724e58..dc9777919 100644
--- a/apps/website/pages/_document.tsx
+++ b/apps/website/pages/_document.tsx
@@ -1,9 +1,38 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import Document, { Head, Html, Main, NextScript } from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
-import createEmotionCache from "./createEmotionCache";
-import * as React from "react";
+import React from "react";
+import createCache from "@emotion/cache";
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) => (
+
+ ));
+
+ return {
+ ...initialProps,
+ styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
+ };
+ }
render() {
return (
@@ -16,32 +45,3 @@ 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 ;
- },
- });
-
- const initialProps = await Document.getInitialProps(ctx);
- const emotionChunks = extractCriticalToChunks(initialProps.html);
- const emotionStyleTags = constructStyleTagsFromChunks(emotionChunks);
-
- return {
- ...initialProps,
- styles: (
- <>
- {initialProps.styles}
-
-
- ),
- };
-};
diff --git a/apps/website/pages/createEmotionCache.ts b/apps/website/pages/createEmotionCache.ts
deleted file mode 100644
index 60a6f6d4d..000000000
--- a/apps/website/pages/createEmotionCache.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import createCache from "@emotion/cache";
-import type { EmotionCache } from "@emotion/utils";
-
-export default function createEmotionCache(): EmotionCache {
- return createCache({ key: "css", prepend: true });
-}