Merge pull request #63 from Kusitms-29th-ASAP/fix/#62

[Fix] SSR 스타일링 풀리는 현상 해결
Kusitms-29th-ASAP · May 20, 2024 · 5ef8310 · 5ef8310
2 parents ec2b073 + 94666e7
commit 5ef8310
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
 import { Provider } from "react-redux";
 import { store } from "@/redux/store";
 import "./global.css";
+import NOSSR from "@/components/common/NOSSR";
 
 const queryClient = new QueryClient();
 
@@ -22,7 +23,9 @@ export default function RootLayout({
       <body>
         <Provider store={store}>
           <QueryClientProvider client={queryClient}>
-            <ThemeProvider theme={theme}>{children}</ThemeProvider>
+            <ThemeProvider theme={theme}>
+              <NOSSR>{children}</NOSSR>
+            </ThemeProvider>
           </QueryClientProvider>
         </Provider>
       </body>

diff --git a/src/components/common/NOSSR.tsx b/src/components/common/NOSSR.tsx
@@ -0,0 +1,10 @@
+import dynamic from "next/dynamic";
+import React from "react";
+
+const NOSSR: React.FC<React.PropsWithChildren> = (props) => (
+  <>{props.children}</>
+);
+
+export default dynamic(() => Promise.resolve(NOSSR), {
+  ssr: false,
+});