fix: prerender시점에서 css도 포함해서 렌더링하도록 설정

codeit-bootcamp-frontend · May 28, 2024 · 297e423 · 297e423
1 parent 1015c20
commit 297e423
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 21 deletions.
diff --git a/api/api.ts b/api/api.ts
@@ -173,11 +173,7 @@ export async function postFolder(name: string) {
 export async function deleteFolder(folderId: string) {
   try {
     const token = localStorage.getItem('token');
-    const { data } = await axios.delete(`/folders/${folderId}`, {
-      headers: {
-        Authorization: token,
-      },
-    });
+    const { data } = await axios.delete(`/folders/${folderId}`);
     return data;
   } catch (error) {
     console.error('Error fetching post folder:', error);

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,19 +1,54 @@
 import { Html, Head, Main, NextScript } from 'next/document';
+import Document, { DocumentContext } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
 
-export default function Document() {
-  return (
-    <Html lang="ko">
-      <Head>
-        <script
-          defer
-          src="https://developers.kakao.com/sdk/js/kakao.min.js"
-        ></script>
-      </Head>
-      <body>
-        <Main />
-        <NextScript />
-        <div id="modal"></div>
-      </body>
-    </Html>
-  );
+class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+
+      return {
+        ...initialProps,
+        styles: [
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>,
+        ],
+      };
+    } catch (error) {
+      throw error;
+    } finally {
+      sheet.seal();
+    }
+  }
+
+  render() {
+    return (
+      <Html lang="ko">
+        <Head>
+          <script
+            defer
+            src="https://developers.kakao.com/sdk/js/kakao.min.js"
+          ></script>
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+          <div id="modal"></div>
+        </body>
+      </Html>
+    );
+  }
 }
+
+export default MyDocument;