fix: router issue in csr

Author: annkimm

packages/lib/src/Router.ts

@@ -104,52 +104,49 @@ export class Router<Handler extends (...args: any[]) => any> {
   }
 
   #findRoute(url?: string) {
-    if (this.#isServer) {
-      // SSR에서는 기본 라우트 반환
-      const defaultRoute = this.#routes.get("/");
-      if (defaultRoute) {
-        return {
-          ...defaultRoute,
-          params: {},
-          path: "/",
-        };
-      }
-      return null;
-    }
+    const actualUrl = url || (this.#isServer ? "/" : window.location.pathname);
+    const { pathname } = new URL(actualUrl, "http://localhost"); // 서버/클라 모두 안전
+    const normalizedPath = pathname.replace(/\/+$/, "") || "/"; // ✅ 마지막 '/' 제거
+
+    const routeEntries = Array.from(this.#routes.entries()).sort(([pathA], [pathB]) => {
+      if (pathA === "*" || pathA === "/*") return 1;
+      if (pathB === "*" || pathB === "/*") return -1;
+      return 0;
+    });
 
-    const actualUrl = url || window.location.pathname;
-    const { pathname } = new URL(actualUrl, window.location.origin);
-    for (const [routePath, route] of this.#routes) {
-      const match = pathname.match(route.regex);
+    for (const [routePath, route] of routeEntries) {
+      const match = normalizedPath.match(route.regex); // ✅ 정규화된 경로 사용
       if (match) {
-        // 매치된 파라미터들을 객체로 변환
         const params: StringRecord = {};
         route.paramNames.forEach((name, index) => {
           params[name] = match[index + 1];
         });
-
-        return {
-          ...route,
-          params,
-          path: routePath,
-        };
+        return { ...route, params, path: routePath };
       }
     }
+
     return null;
   }
 
   push(url: string) {
-    if (this.#isServer) {
-      return;
-    }
+    if (this.#isServer) return;
 
     try {
-      // baseUrl이 없으면 자동으로 붙여줌
-      const fullUrl = url.startsWith(this.#baseUrl) ? url : this.#baseUrl + (url.startsWith("/") ? url : "/" + url);
+      let cleanUrl = url;
 
-      const prevFullUrl = `${window.location.pathname}${window.location.search}`;
+      // ✅ 쿼리가 없는 경우에만 trailing slash 강제
+      if (!cleanUrl.includes("?")) {
+        cleanUrl = cleanUrl.replace(/\/+$/, "");
+        if (!cleanUrl.endsWith("/")) {
+          cleanUrl += "/";
+        }
+      }
+
+      const fullUrl = cleanUrl.startsWith(this.#baseUrl)
+        ? cleanUrl
+        : this.#baseUrl + (cleanUrl.startsWith("/") ? cleanUrl : "/" + cleanUrl);
 
-      // 히스토리 업데이트
+      const prevFullUrl = `${window.location.pathname}${window.location.search}`;
       if (prevFullUrl !== fullUrl) {
         window.history.pushState(null, "", fullUrl);
       }
@@ -162,7 +159,9 @@ export class Router<Handler extends (...args: any[]) => any> {
   }
 
   start() {
+    console.log("Router starting...");
     this.#route = this.#findRoute();
+    console.log("Initial route:", this.#route);
     this.#observer.notify();
   }
 

packages/lib/src/hooks/useRouter.ts

@@ -12,13 +12,39 @@ export const useRouter = <T extends RouterInstance<AnyFunction>, S = T>(
 ) => {
   const shallowSelector = useShallowSelector(selector);
 
-  // 라우터 인스턴스 자체를 읽는다 (getState 기대 X)
-  const getSnapshot = () => shallowSelector(router);
+  // 라우터 인스턴스 자체를 읽는다
+  const getSnapshot = () => {
+    const result = shallowSelector(router);
+    console.log("getSnapshot called:", {
+      target: router.target?.name,
+      route: router.route?.path,
+      params: router.params,
+    });
+    return result;
+  };
 
-  // subscribe는 필수. 없으면 no-op
+  // subscribe 함수
+  const subscribe = (callback: () => void) => {
+    console.log("Subscribing to router changes");
 
-  const subscribe = typeof (router as any).subscribe === "function" ? (router as any).subscribe : () => () => {};
+    // 콜백을 래핑해서 언제 호출되는지 확인
+    const wrappedCallback = () => {
+      console.log("Router state changed! Triggering rerender...");
+      callback();
+    };
 
-  // ✅ SSR 호환: 3번째 인자(getServerSnapshot) 추가
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    if (router.subscribe && typeof router.subscribe === "function") {
+      console.log("Router has subscribe method, using it");
+      const unsubscribe = router.subscribe(wrappedCallback);
+      console.log("Subscribe returned:", typeof unsubscribe);
+      return unsubscribe;
+    }
+
+    console.error("Router subscribe method not found:", router);
+    return () => {};
+  };
+
+  const result = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  return result;
 };

packages/react/server.js

@@ -10,7 +10,6 @@ const app = express();
 // ✅ 모든 요청 로깅 미들웨어 (가장 먼저)
 app.use((req, res, next) => {
   console.log(`🌍 [${new Date().toISOString()}] ${req.method} ${req.originalUrl}`);
-  console.log(`🔍 User-Agent: ${req.headers["user-agent"]}`);
   next();
 });
 
@@ -57,12 +56,11 @@ app.get("*all", async (req, res) => {
   }
 
   try {
-    console.log("🎯 === SSR 요청 디버그 ===");
-    console.log("🎯 URL:", req.originalUrl);
-    console.log("🎯 Path:", req.path);
-    console.log("🎯 Query:", req.query);
-    console.log("🎯 Method:", req.method);
-    console.log("🎯 //=== SSR 요청 디버그 ===");
+    console.log("🎯 SSR 요청:", {
+      originalUrl: req.originalUrl,
+      path: req.path,
+      query: req.query,
+    });
 
     const url = req.originalUrl.replace(base, "");
     const query = req.query;
@@ -72,71 +70,40 @@ app.get("*all", async (req, res) => {
     try {
       if (!prod) {
         // 개발 환경
-        console.log("📖 개발 모드: index.html 읽기...");
         template = fs.readFileSync("./index.html", "utf-8");
         template = await vite.transformIndexHtml(url, template);
-
-        console.log("📦 개발 모드: main-server.tsx 로드...");
-        try {
-          render = (await vite.ssrLoadModule("./src/main-server.tsx")).render;
-        } catch (ssrError) {
-          console.error("❌ SSR 모듈 로드 실패:", ssrError);
-          // SSR 실패 시 클라이언트 사이드 렌더링으로 폴백
-          render = () => ({
-            html: '<div id="root"><!-- SSR 실패, 클라이언트에서 렌더링됩니다 --></div>',
-            head: "<title>쇼핑몰</title>",
-            initialData: {},
-          });
-        }
+        render = (await vite.ssrLoadModule("./src/main-server.tsx")).render;
       } else {
         // 프로덕션 환경
-        console.log("📖 프로덕션 모드: 템플릿 사용...");
         template = templateHtml;
-        try {
-          render = (await import("./dist/react-ssr/main-server.js")).render;
-        } catch (ssrError) {
-          console.error("❌ 프로덕션 SSR 모듈 로드 실패:", ssrError);
-          render = () => ({
-            html: '<div id="root"><!-- SSR 실패, 클라이언트에서 렌더링됩니다 --></div>',
-            head: "<title>쇼핑몰</title>",
-            initialData: {},
-          });
-        }
+        render = (await import("./dist/react-ssr/main-server.js")).render;
       }
 
       console.log("✅ 템플릿 및 render 함수 로드 성공");
 
       // render 함수 호출
-      console.log("🔄 SSR 렌더링 시작...");
-      console.log(url);
+      console.log("🔄 SSR 렌더링 시작...", { url });
 
       const { html, head, initialData } = await render(url, query);
 
-      console.log("✅ SSR 렌더링 완료");
-      console.log("📄 HTML 길이:", html?.length || 0);
-      console.log("🏷️ Head:", head?.substring(0, 100) + "...");
-      console.log("💾 Initial Data keys:", Object.keys(initialData || {}));
-
-      console.log(initialData);
+      console.log("✅ SSR 렌더링 완료", {
+        htmlLength: html?.length || 0,
+        hasCurrentProduct: !!initialData?.currentProduct,
+        productTitle: initialData?.currentProduct?.title,
+      });
 
       // 초기 데이터 스크립트 생성
       const initialDataScript =
         Object.keys(initialData || {}).length > 0
           ? `<script>window.__INITIAL_DATA__ = ${JSON.stringify(initialData).replace(/</g, "\\u003c")};</script>`
           : "";
 
-      console.log("server html");
-
-      console.log(html);
-
       // 템플릿 교체
       const finalHtml = template
         .replace("<!--app-html-->", html)
         .replace("<!--app-head-->", head)
         .replace("</head>", `${initialDataScript}</head>`);
 
-      console.log(finalHtml);
-
       console.log("🎉 최종 HTML 생성 완료, 길이:", finalHtml.length);
 
       res.setHeader("Content-Type", "text/html");

packages/react/src/App.tsx

@@ -9,14 +9,12 @@ router.addRoute("/product/:id", ProductDetailPage);
 router.addRoute("*", NotFoundPage);
 
 const CartInitializer = () => {
-  if (typeof window !== "undefined") {
-    useLoadCartStore();
-  }
+  useLoadCartStore();
   return null;
 };
 
 /**
- * 클라이언트 사이드 애플리케이션
+ * 클라이언트 사이드 애플리케이션 (원래 방식)
  */
 const ClientApp = () => {
   const PageComponent = useCurrentPage();

packages/react/src/entities/carts/hooks/useLoadCartStore.ts

@@ -8,17 +8,37 @@ export const useLoadCartStore = () => {
   const data = useStore(cartStore);
 
   useEffect(() => {
-    cartStore.dispatch({
-      type: CART_ACTIONS.LOAD_FROM_STORAGE,
-      payload: cartStorage.get(),
-    });
+    // 서버사이드에서는 스토리지 접근하지 않음
+    if (typeof window === "undefined") {
+      setInit(true);
+      return;
+    }
+
+    try {
+      const savedData = cartStorage.get();
+      if (savedData) {
+        cartStore.dispatch({
+          type: CART_ACTIONS.LOAD_FROM_STORAGE,
+          payload: savedData,
+        });
+      }
+    } catch (error) {
+      console.warn("장바구니 데이터 로드 실패:", error);
+    }
+
     setInit(true);
   }, []);
 
   useEffect(() => {
-    if (!init) {
+    // 서버사이드에서는 스토리지에 저장하지 않음
+    if (!init || typeof window === "undefined") {
       return;
     }
-    cartStorage.set(data);
+
+    try {
+      cartStorage.set(data);
+    } catch (error) {
+      console.warn("장바구니 데이터 저장 실패:", error);
+    }
   }, [init, data]);
 };