feat: 하이드레이션 조건 보강

Author: ldhldh07

packages/react/src/api/mockApi.ts

@@ -42,7 +42,7 @@ function filterProducts(products: Product[], query: Record<string, string>) {
   return filtered;
 }
 
-const delay = (ms = 50) => new Promise((r) => setTimeout(r, ms));
+const delay = (ms = 200) => new Promise((r) => setTimeout(r, ms));
 
 export async function getProducts(params: StringRecord = {}) {
   const { limit = 20, search = "", category1 = "", category2 = "", sort = "price_asc" } = params;

packages/react/src/main.tsx

@@ -28,7 +28,9 @@ function main() {
 }
 
 // 애플리케이션 시작
-if (import.meta.env.DEV || (typeof window !== "undefined" && !window.__INITIAL_DATA__)) {
+if (import.meta.env.DEV) {
+  enableMocking().then(main);
+} else if (typeof window !== "undefined" && !window.__INITIAL_DATA__) {
   enableMocking().then(main);
 } else {
   main();

packages/react/src/pages/HomePage.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { loadNextProducts, loadProductsAndCategories, ProductList, SearchBar } from "../entities";
+import { loadNextProducts, loadProductsAndCategories, ProductList, SearchBar, useProductStore } from "../entities";
 import { PageWrapper } from "./PageWrapper";
 
 const headerLeft = (
@@ -27,12 +27,22 @@ const unregisterScrollHandler = () => {
 };
 
 export const HomePage = () => {
+  const state = useProductStore();
   useEffect(() => {
     registerScrollHandler();
-    if (!(typeof window !== "undefined" && window.__INITIAL_DATA__)) {
+    const hasSSRData =
+      state.status === "done" &&
+      (state.products.length > 0 ||
+        !!state.currentProduct ||
+        (state.categories && Object.keys(state.categories).length > 0));
+
+    if (!hasSSRData) {
       loadProductsAndCategories();
     }
-    return unregisterScrollHandler;
+
+    return () => {
+      unregisterScrollHandler();
+    };
   }, []);
 
   return (

packages/react/static-site-generate.js

@@ -28,10 +28,13 @@ async function generateStaticSite() {
         ? `<script>window.__INITIAL_DATA__=${JSON.stringify(rendered.initialData).replace(/</g, "\\u003c")}</script>`
         : "";
 
-      const html = template
-        .replace("<!--app-head-->", appHead)
-        .replace("<!--app-html-->", appHtml)
-        .replace("</head>", `${initialDataScript}</head>`);
+      let html = template.replace("<!--app-head-->", appHead).replace("<!--app-html-->", appHtml);
+      if (initialDataScript) {
+        html = html.replace(/<script\s+type="module"/, `${initialDataScript}\n<script type="module"`);
+        if (!/<script\s+type="module"/.test(template)) {
+          html = html.replace("</head>", `${initialDataScript}</head>`);
+        }
+      }
 
       saveHtmlFile(page.filePath, html);
     }),

packages/react/vite.config.ts

@@ -1,7 +1,8 @@
 import react from "@vitejs/plugin-react";
 import { createViteConfig } from "../../createViteConfig";
 
-const base: string = process.env.NODE_ENV === "production" ? "/front_6th_chapter4-1/react/" : "";
+const isProdLike = process.env.NODE_ENV === "production" || process.env.CI === "true" || !!process.env.GITHUB_ACTIONS;
+const base: string = isProdLike ? "/front_6th_chapter4-1/react/" : "";
 
 export default createViteConfig({
   base,