feat: Hydration 및 서버상태와 클라이언트상태 동기화'

Author: bebusl

packages/vanilla/server.js

@@ -32,7 +32,7 @@ if (!prod) {
 }
 
 // Serve HTML
-app.use("*all", async (req, res) => {
+app.get("*all", async (req, res) => {
   try {
     const url = req.originalUrl.replace(base, "");
 

packages/vanilla/src/main.js

@@ -4,27 +4,47 @@ import { registerAllEvents } from "./events";
 import { loadCartFromStorage } from "./services";
 import { router } from "./router";
 import { BASE_URL } from "./constants.js";
+import { productStore } from "./stores/productStore.js";
+import { PRODUCT_ACTIONS } from "./stores/actionTypes.js";
 
 const enableMocking = () =>
   import("./mocks/browser.js").then(({ worker }) =>
     worker.start({
       serviceWorker: {
         url: `${BASE_URL}mockServiceWorker.js`,
       },
-      onUnhandledRequest: "bypass",
+      onUnhandledRequest: "warn",
     }),
   );
 
 function main() {
+  // SSR에서 주입된 초기 데이터 확인 및 hydration
+  const initialData = window.__INITIAL_DATA__;
+  if (initialData) {
+    console.log("Hydrating with initial data:", initialData);
+
+    productStore.dispatch({
+      type: PRODUCT_ACTIONS.SETUP,
+      payload: {
+        products: initialData.products || [],
+        totalCount: initialData.totalCount || 0,
+        categories: initialData.categories || {},
+        currentProduct: initialData.product || null,
+        relatedProducts: initialData.relatedProducts || [],
+        loading: false,
+        status: "done",
+      },
+    });
+  }
+
   registerAllEvents();
   registerGlobalEvents();
   loadCartFromStorage();
   initRender();
   router.start();
 }
 
-if (import.meta.env.MODE !== "test") {
-  enableMocking().then(main);
-} else {
-  main();
-}
+// 현재 node, test, browser환경에서 모두 msw를 사용하므로 분기처리하지 않음.
+enableMocking().then(main);
+
+// enableMocking().then(main);

packages/vanilla/src/services/productService.js

@@ -3,6 +3,14 @@ import { initialProductState, productStore, PRODUCT_ACTIONS } from "../stores";
 import { router } from "../router";
 
 export const loadProductsAndCategories = async () => {
+  const currentState = productStore.getState();
+
+  // 이미 상품 목록과 카테고리 데이터가 있으면 API 호출 스킵 (SSR hydration)
+  if (currentState.products.length > 0 && Object.keys(currentState.categories).length > 0 && !currentState.loading) {
+    console.log("이미 상품 목록 데이터가 있어서 API 호출 스킵");
+    return;
+  }
+
   router.query = { current: undefined }; // 항상 첫 페이지로 초기화
   productStore.dispatch({
     type: PRODUCT_ACTIONS.SETUP,
@@ -120,14 +128,11 @@ export const setLimit = (limit) => {
  */
 export const loadProductDetailForPage = async (productId) => {
   try {
-    const currentProduct = productStore.getState().currentProduct;
-    if (productId === currentProduct?.productId) {
-      // 관련 상품 로드 (같은 category2 기준)
-      if (currentProduct.category2) {
-        await loadRelatedProducts(currentProduct.category2, productId);
-      }
+    // 이미 해당 상품 데이터가 있고, 관련 상품도 있으면 API 호출 스킵
+    if (import.meta.env.SSR) {
       return;
     }
+
     // 현재 상품 클리어
     productStore.dispatch({
       type: PRODUCT_ACTIONS.SETUP,