[2팀 고다솜] Chapter 4-1 성능최적화: SSR, SSG, Infra

packages/lib/src/Router.ts

@@ -12,38 +12,46 @@ type QueryPayload = Record<string, string | number | undefined>;
 
 export type RouterInstance<T extends AnyFunction> = InstanceType<typeof Router<T>>;
 
+const isServer = () => typeof window === "undefined";
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export class Router<Handler extends (...args: any[]) => any> {
   readonly #routes: Map<string, Route<Handler>>;
   readonly #observer = createObserver();
   readonly #baseUrl;
 
   #route: null | (Route<Handler> & { params: StringRecord; path: string });
+  #query: StringRecord = {};
 
   constructor(baseUrl = "") {
     this.#routes = new Map();
     this.#route = null;
     this.#baseUrl = baseUrl.replace(/\/$/, "");
 
-    window.addEventListener("popstate", () => {
-      this.#route = this.#findRoute();
-      this.#observer.notify();
-    });
-
-    document.addEventListener("click", (e) => {
-      const target = e.target as HTMLElement;
-      if (!target?.closest("[data-link]")) {
-        return;
-      }
-      e.preventDefault();
-      const url = target.getAttribute("href") ?? target.closest("[data-link]")?.getAttribute("href");
-      if (url) {
-        this.push(url);
-      }
-    });
+    if (!isServer()) {
+      window.addEventListener("popstate", () => {
+        this.#route = this.#findRoute();
+        this.#observer.notify();
+      });
+
+      document.addEventListener("click", (e) => {
+        const target = e.target as HTMLElement;
+        if (!target?.closest("[data-link]")) {
+          return;
+        }
+        e.preventDefault();
+        const url = target.getAttribute("href") ?? target.closest("[data-link]")?.getAttribute("href");
+        if (url) {
+          this.push(url);
+        }
+      });
+    }
   }
 
   get query(): StringRecord {
+    if (isServer()) {
+      return this.#query;
+    }
     return Router.parseQuery(window.location.search);
   }
 
@@ -85,10 +93,15 @@ export class Router<Handler extends (...args: any[]) => any> {
     });
   }
 
-  #findRoute(url = window.location.pathname) {
-    const { pathname } = new URL(url, window.location.origin);
+  #findRoute(url?: string) {
+    const pathname = url || (isServer() ? "" : window.location.pathname);
+    if (!pathname) return null;
+
+    const origin = isServer() ? "http://localhost" : window.location.origin;
+    const { pathname: normalizedPath } = new URL(pathname, origin);
+
     for (const [routePath, route] of this.#routes) {
-      const match = pathname.match(route.regex);
+      const match = normalizedPath.match(route.regex);
       if (match) {
         // 매치된 파라미터들을 객체로 변환
         const params: StringRecord = {};
@@ -106,7 +119,36 @@ export class Router<Handler extends (...args: any[]) => any> {
     return null;
   }
 
+  match(url: string, query?: QueryPayload) {
+    const pathname = url.includes("?") ? url.split("?")[0] : url;
+    const route = this.#findRoute(pathname);
+
+    if (!route) return null;
+
+    this.#route = route;
+    const queryParams: StringRecord = {};
+    if (query) {
+      Object.entries(query).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "") {
+          queryParams[key] = String(value);
+        }
+      });
+    }
+    this.#query = queryParams;
+
+    return {
+      path: route.path,
+      params: route.params ?? {},
+      handler: route.handler,
+      query: queryParams,
+    };
+  }
+
   push(url: string) {
+    if (isServer()) {
+      return;
+    }
+
     try {
       // baseUrl이 없으면 자동으로 붙여줌
       const fullUrl = url.startsWith(this.#baseUrl) ? url : this.#baseUrl + (url.startsWith("/") ? url : "/" + url);
@@ -130,8 +172,9 @@ export class Router<Handler extends (...args: any[]) => any> {
     this.#observer.notify();
   }
 
-  static parseQuery = (search = window.location.search) => {
-    const params = new URLSearchParams(search);
+  static parseQuery = (search?: string) => {
+    const searchString = search ?? (isServer() ? "" : window.location.search);
+    const params = new URLSearchParams(searchString);
     const query: StringRecord = {};
     for (const [key, value] of params) {
       query[key] = value;
@@ -150,6 +193,11 @@ export class Router<Handler extends (...args: any[]) => any> {
   };
 
   static getUrl = (newQuery: QueryPayload, baseUrl = "") => {
+    if (isServer()) {
+      const queryString = Router.stringifyQuery(newQuery);
+      return `${baseUrl}${queryString ? `?${queryString}` : ""}`;
+    }
+
     const currentQuery = Router.parseQuery();
     const updatedQuery = { ...currentQuery, ...newQuery };
 

packages/lib/src/createStorage.ts

@@ -1,15 +1,64 @@
 import { createObserver } from "./createObserver.ts";
 
-export const createStorage = <T>(key: string, storage = window.localStorage) => {
-  let data: T | null = JSON.parse(storage.getItem(key) ?? "null");
+const isServer = () => typeof window === "undefined";
+
+/**
+ * 서버 사이드에서 사용할 메모리 기반 스토리지
+ * window.localStorage 대신 사용하여 브라우저 의존성 제거
+ */
+class InMemoryStorage implements Storage {
+  private data = new Map<string, string>();
+
+  getItem(key: string): string | null {
+    return this.data.get(key) || null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.data.set(key, value);
+  }
+
+  removeItem(key: string): void {
+    this.data.delete(key);
+  }
+
+  clear(): void {
+    this.data.clear();
+  }
+
+  get length(): number {
+    return this.data.size;
+  }
+
+  key(index: number): string | null {
+    const keys = Array.from(this.data.keys());
+    return keys[index] || null;
+  }
+}
+
+/**
+ * 로컬스토리지 추상화 함수
+ * 서버에서는 InMemoryStorage를 사용하여 브라우저 의존성 제거
+ * @param key - 스토리지 키
+ * @param storage - 기본값은 클라이언트는 localStorage, 서버는 InMemoryStorage
+ * @returns {Object} { get, set, reset, subscribe }
+ */
+export const createStorage = <T>(key: string, storage?: Storage) => {
+  const actualStorage: Storage = storage ?? (isServer() ? new InMemoryStorage() : window.localStorage);
   const { subscribe, notify } = createObserver();
 
-  const get = () => data;
+  const get = (): T | null => {
+    try {
+      const item = actualStorage.getItem(key);
+      return item ? JSON.parse(item) : null;
+    } catch (error) {
+      console.error(`Error parsing storage item for key "${key}":`, error);
+      return null;
+    }
+  };
 
   const set = (value: T) => {
     try {
-      data = value;
-      storage.setItem(key, JSON.stringify(data));
+      actualStorage.setItem(key, JSON.stringify(value));
       notify();
     } catch (error) {
       console.error(`Error setting storage item for key "${key}":`, error);
@@ -18,8 +67,7 @@ export const createStorage = <T>(key: string, storage = window.localStorage) =>
 
   const reset = () => {
     try {
-      data = null;
-      storage.removeItem(key);
+      actualStorage.removeItem(key);
       notify();
     } catch (error) {
       console.error(`Error removing storage item for key "${key}":`, error);

packages/lib/src/hooks/useRouter.ts

@@ -7,5 +7,6 @@ const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 
 export const useRouter = <T extends RouterInstance<AnyFunction>, S>(router: T, selector = defaultSelector<T, S>) => {
   const shallowSelector = useShallowSelector(selector);
-  return useSyncExternalStore(router.subscribe, () => shallowSelector(router));
+  const getSnapshot = () => shallowSelector(router);
+  return useSyncExternalStore(router.subscribe, getSnapshot, getSnapshot);
 };

packages/lib/src/hooks/useStore.ts

@@ -1,5 +1,5 @@
-import type { createStore } from "../createStore";
 import { useSyncExternalStore } from "react";
+import type { createStore } from "../createStore";
 import { useShallowSelector } from "./useShallowSelector";
 
 type Store<T> = ReturnType<typeof createStore<T>>;
@@ -8,5 +8,6 @@ const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 
 export const useStore = <T, S = T>(store: Store<T>, selector: (state: T) => S = defaultSelector<T, S>) => {
   const shallowSelector = useShallowSelector(selector);
-  return useSyncExternalStore(store.subscribe, () => shallowSelector(store.getState()));
+  const getSnapshot = () => shallowSelector(store.getState());
+  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 };

packages/react/index.html

@@ -1,26 +1,27 @@
 <!doctype html>
 <html lang="ko">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!--app-head-->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <link rel="stylesheet" href="/src/styles.css">
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            primary: "#3b82f6",
-            secondary: "#6b7280"
-          }
-        }
-      }
-    };
-  </script>
-</head>
-<body class="bg-gray-50">
-<div id="root"><!--app-html--></div>
-<script type="module" src="/src/main.tsx"></script>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--app-head-->
+    <!--app-data-->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/src/styles.css" />
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: "#3b82f6",
+              secondary: "#6b7280",
+            },
+          },
+        },
+      };
+    </script>
+  </head>
+  <body class="bg-gray-50">
+    <div id="root"><!--app-html--></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

packages/react/package.json

@@ -8,7 +8,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --port 5175",
-    "dev:ssr": "PORT=5176 node server.js",
+    "dev:ssr": "PORT=5176 nodemon server.js",
     "build:client": "rm -rf ./dist/react && vite build --outDir ./dist/react && cp ./dist/react/index.html ./dist/react/404.html",
     "build:client-for-ssg": "rm -rf ../../dist/react && vite build --outDir ../../dist/react",
     "build:server": "vite build --outDir ./dist/react-ssr --ssr src/main-server.tsx",
@@ -53,6 +53,7 @@
     "express": "^5.1.0",
     "compression": "^1.7.5",
     "sirv": "^3.0.0",
-    "concurrently": "latest"
+    "concurrently": "latest",
+    "nodemon": "^3.1.11"
   }
 }

packages/react/server.js

@@ -1,29 +1,55 @@
 import express from "express";
-import { renderToString } from "react-dom/server";
-import { createElement } from "react";
+import fs from "fs";
 
 const prod = process.env.NODE_ENV === "production";
-const port = process.env.PORT || 5174;
+const port = process.env.PORT || 5175;
 const base = process.env.BASE || (prod ? "/front_7th_chapter4-1/react/" : "/");
 
 const app = express();
+let vite;
 
-app.get("*all", (req, res) => {
-  res.send(
-    `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>React SSR</title>
-</head>
-<body>
-<div id="app">${renderToString(createElement("div", null, "안녕하세요"))}</div>
-</body>
-</html>
-  `.trim(),
-  );
+if (!prod) {
+  const { createServer } = await import("vite");
+  vite = await createServer({
+    server: { middlewareMode: true },
+    appType: "custom",
+    base,
+  });
+  app.use(vite.middlewares);
+} else {
+  const compression = (await import("compression")).default;
+  const sirv = (await import("sirv")).default;
+  app.use(compression());
+  app.use(base, sirv("./dist/react", { extensions: [] }));
+}
+
+app.use("*all", async (req, res) => {
+  try {
+    const url = req.originalUrl.replace(base, "/");
+    let template, render;
+
+    if (!prod) {
+      template = fs.readFileSync("./index.html", "utf-8");
+      template = await vite.transformIndexHtml(url, template);
+      render = (await vite.ssrLoadModule("/src/main-server.js")).render;
+    } else {
+      template = fs.readFileSync("./dist/react/index.html", "utf-8");
+      render = (await import("./dist/react-ssr/main-server.js")).render;
+    }
+
+    const { head, html, data } = await render(url, req.query);
+
+    const appHtml = template
+      .replace(`<!--app-head-->`, head ?? "")
+      .replace(`<!--app-html-->`, html ?? "")
+      .replace(`<!--app-data-->`, data ?? "");
+
+    res.status(200).set({ "Content-Type": "text/html" }).send(appHtml);
+  } catch (e) {
+    vite?.ssrFixStacktrace(e);
+    console.log(e.stack);
+    res.status(500).end(e.stack);
+  }
 });
 
 // Start http server