Merge pull request #77 from Team-INSERT/feat/styled-components

Ubinquitous · web-flow · commit 5e0be6b92c24 · 2023-09-29T23:35:57.000+09:00
스타일드 컴포넌트 SSR 이슈 해결
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
-import Provider from "@/provider/provider.helper";
+import Provider from "@/provider/Provider.helper";
+import ServerStyleProvider from "@/provider/ServerStyleProvider";
 
 export const metadata = {
   title: "BSM",
@@ -13,7 +14,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <Provider>{children}</Provider>
+        <Provider>
+          <ServerStyleProvider>{children}</ServerStyleProvider>
+        </Provider>
       </body>
     </html>
   );
diff --git a/src/provider/ServerStyleProvider.tsx b/src/provider/ServerStyleProvider.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+export default function ServerStyleProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    // eslint-disable-next-line
+    return <>{styles}</>;
+  });
+
+  // eslint-disable-next-line
+  if (typeof window !== "undefined") return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}
diff --git a/src/provider/StyledComponentsProvider.helper.tsx b/src/provider/StyledComponentsProvider.helper.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+export function useStyledComponentsRegistry() {
+  const [styledComponentsStyleSheet] = React.useState(
+    () => new ServerStyleSheet(),
+  );
+
+  const styledComponentsFlushEffect = () => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    // eslint-disable-next-line
+    return <>{styles}</>;
+  };
+
+  const StyledComponentsProvider = ({
+    children,
+  }: {
+    children: React.ReactNode;
+  }) => (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children as React.ReactElement}
+    </StyleSheetManager>
+  );
+
+  return [StyledComponentsProvider, styledComponentsFlushEffect] as const;
+}
diff --git a/src/provider/provider.helper.tsx b/src/provider/provider.helper.tsx
@@ -2,9 +2,9 @@
 
 import React from "react";
 import { RecoilRoot } from "recoil";
-import ReactQueryProvider from "./reactQueryProvider.helper";
-import LayoutProvider from "./layoutProvider.helper";
-import ApolloClientProvider from "./apolloClientProvider.helper";
+import ReactQueryProvider from "./ReactQueryProvider.helper";
+import ApolloClientProvider from "./ApolloClientProvider.helper";
+import LayoutProvider from "./LayoutProvider.helper";
 
 const Provider = ({ children }: React.PropsWithChildren) => {
   return (
