feat: [advanced]ssr 연결

Author: Yuyeol

packages/lib/src/Router.ts

@@ -1,7 +1,8 @@
+import type { FC } from "react";
 import { createObserver } from "./createObserver";
 import type { AnyFunction, StringRecord } from "./types";
 
-interface Route<Handler extends AnyFunction> {
+interface Route<Handler extends FC<unknown>> {
   regex: RegExp;
   paramNames: string[];
   handler: Handler;
@@ -12,11 +13,11 @@ type QueryPayload = Record<string, string | number | undefined>;
 
 export type RouterInstance<T extends AnyFunction> = InstanceType<typeof Router<T>>;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export class Router<Handler extends (...args: any[]) => any> {
+export class Router<Handler extends FC<unknown>> {
   readonly #routes: Map<string, Route<Handler>>;
   readonly #observer = createObserver();
   readonly #baseUrl;
+  #ssrQuery: StringRecord = {};
 
   #route: null | (Route<Handler> & { params: StringRecord; path: string });
 
@@ -25,37 +26,57 @@ export class Router<Handler extends (...args: any[]) => any> {
     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 (typeof window !== "undefined") {
+      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 {
-    return Router.parseQuery(window.location.search);
+    if (typeof window !== "undefined") {
+      return Router.parseQuery(window.location.search);
+    }
+    return this.#ssrQuery;
   }
 
   set query(newQuery: QueryPayload) {
-    const newUrl = Router.getUrl(newQuery, this.#baseUrl);
-    this.push(newUrl);
+    if (typeof window !== "undefined") {
+      const newUrl = Router.getUrl(newQuery, this.#baseUrl);
+      this.push(newUrl);
+    } else {
+      this.#ssrQuery = Object.entries(newQuery).reduce((acc, [key, value]) => {
+        if (value !== null && value !== undefined && value !== "") {
+          acc[key] = String(value);
+          return acc;
+        }
+        return acc;
+      }, {} as StringRecord);
+    }
   }
 
   get params() {
     return this.#route?.params ?? {};
   }
 
+  set params(newParams: StringRecord) {
+    this.#route ??= {} as Route<Handler> & { params: StringRecord; path: string };
+    this.#route.params = newParams;
+  }
+
   get route() {
     return this.#route;
   }
@@ -66,7 +87,7 @@ export class Router<Handler extends (...args: any[]) => any> {
 
   readonly subscribe = this.#observer.subscribe;
 
-  addRoute(path: string, handler: Handler) {
+  addRoute<T>(path: string, handler: FC<T>) {
     // 경로 패턴을 정규식으로 변환
     const paramNames: string[] = [];
     const regexPath = path
@@ -76,17 +97,19 @@ export class Router<Handler extends (...args: any[]) => any> {
       })
       .replace(/\//g, "\\/");
 
-    const regex = new RegExp(`^${this.#baseUrl}${regexPath}$`);
+    const regex =
+      typeof window !== "undefined" ? new RegExp(`^${this.#baseUrl}${regexPath}$`) : new RegExp(`^${regexPath}$`);
 
     this.#routes.set(path, {
       regex,
       paramNames,
-      handler,
+      handler: handler as Handler,
     });
   }
 
   #findRoute(url = window.location.pathname) {
-    const { pathname } = new URL(url, window.location.origin);
+    // pathname 만 쓰기 때문에 임시 값 설정
+    const { pathname } = new URL(url, "http://localhost");
     for (const [routePath, route] of this.#routes) {
       const match = pathname.match(route.regex);
       if (match) {
@@ -125,8 +148,8 @@ export class Router<Handler extends (...args: any[]) => any> {
     }
   }
 
-  start() {
-    this.#route = this.#findRoute();
+  start(url?: string) {
+    this.#route = this.#findRoute(url);
     this.#observer.notify();
   }
 

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-->
+    <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>
+    <!-- app-data -->
+  </body>
 </html>

packages/react/server.js

@@ -1,29 +1,81 @@
 import express from "express";
-import { renderToString } from "react-dom/server";
-import { createElement } from "react";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { createServer } from "vite";
 
 const prod = process.env.NODE_ENV === "production";
 const port = process.env.PORT || 5174;
 const base = process.env.BASE || (prod ? "/front_6th_chapter4-1/react/" : "/");
 
+const templateHtml = prod ? await fs.readFile("./dist/react/index.html", "utf-8") : "";
+
+const vite = await createServer({
+  server: { middlewareMode: true },
+  appType: "custom",
+  base,
+});
+
+const { mswServer } = await vite.ssrLoadModule("./src/mocks/node.ts");
+mswServer.listen({
+  onUnhandledRequest: "bypass",
+});
+
 const app = express();
 
-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(),
-  );
+// Add Vite or respective production middlewares
+/** @type {import('vite').ViteDevServer | undefined} */
+if (!prod) {
+  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.get("/favicon.ico", (_, res) => {
+  res.status(204).end();
+});
+app.get("/.well-known/appspecific/com.chrome.devtools.json", (_, res) => {
+  res.status(204).end();
+});
+
+app.get("*all", async (req, res) => {
+  try {
+    const url = req.originalUrl.replace(base, "");
+    const pathname = path.normalize(`/${url.split("?")[0]}`);
+
+    /** @type {string} */
+    let template;
+    /** @type {import('./src/main-server.js').render} */
+    let render;
+    if (!prod) {
+      // Always read fresh template in development
+      template = await fs.readFile("./index.html", "utf-8");
+      template = await vite.transformIndexHtml(url, template);
+      render = (await vite.ssrLoadModule("/src/main-server.js")).render;
+    } else {
+      template = templateHtml;
+      render = (await import("./dist/react-ssr/main-server.js")).render;
+    }
+
+    const rendered = await render(pathname, req.query);
+
+    const html = template
+      .replace(`<!--app-head-->`, rendered.head ?? "")
+      .replace(`<!--app-html-->`, rendered.html ?? "")
+      .replace(
+        `<!-- app-data -->`,
+        `<script>window.__INITIAL_DATA__ = ${JSON.stringify(rendered.__INITIAL_DATA__)};</script>`,
+      );
+
+    res.status(200).set({ "Content-Type": "text/html" }).send(html);
+  } catch (e) {
+    vite?.ssrFixStacktrace(e);
+    console.log(e.stack);
+    res.status(500).end(e.stack);
+  }
 });
 
 // Start http server

packages/react/src/App.tsx

@@ -1,28 +1,40 @@
-import { router, useCurrentPage } from "./router";
-import { HomePage, NotFoundPage, ProductDetailPage } from "./pages";
-import { useLoadCartStore } from "./entities";
+import type { StringRecord } from "@hanghae-plus/lib";
+import { useState } from "react";
 import { ModalProvider, ToastProvider } from "./components";
-
-// 홈 페이지 (상품 목록)
-router.addRoute("/", HomePage);
-router.addRoute("/product/:id/", ProductDetailPage);
-router.addRoute(".*", NotFoundPage);
+import { useLoadCartStore } from "./entities";
+import { router, useCurrentPage } from "./router";
+import { isServer } from "./utils";
 
 const CartInitializer = () => {
   useLoadCartStore();
   return null;
 };
 
+interface Props {
+  data: unknown;
+  query: StringRecord;
+}
+
 /**
  * 전체 애플리케이션 렌더링
  */
-export const App = () => {
+export const App = ({ data, query }: Props) => {
+  useState(() => {
+    if (isServer) {
+      router.query = query;
+    }
+  });
   const PageComponent = useCurrentPage();
 
   return (
     <>
       <ToastProvider>
-        <ModalProvider>{PageComponent ? <PageComponent /> : null}</ModalProvider>
+        <ModalProvider>
+          {PageComponent ? (
+            // @ts-expect-error initialData is unknowns
+            <PageComponent data={data} />
+          ) : null}
+        </ModalProvider>
       </ToastProvider>
       <CartInitializer />
     </>

packages/react/src/main-server.tsx

@@ -1,4 +1,24 @@
+import { renderToString } from "react-dom/server";
+import { App } from "./App";
+import { router } from "./router";
+import type { ServerOptions } from "./router/withServer";
+
+const fallback = () => {};
+
 export const render = async (url: string, query: Record<string, string>) => {
   console.log({ url, query });
-  return "";
+  console.log("server start");
+  router.start(url);
+  const { ssr = fallback, metadata = fallback } = router.target as unknown as ServerOptions;
+  const params = { query, params: router.params };
+  const { title = "" } = (await metadata(params)) ?? {};
+  const data = (await ssr(params)) ?? {};
+  const html = renderToString(<App data={data} query={query} />);
+  console.log("server end");
+
+  return {
+    head: `<title>${title}</title>`,
+    html,
+    __INITIAL_DATA__: data,
+  };
 };

packages/react/src/main.tsx

@@ -1,7 +1,7 @@
+import { hydrateRoot } from "react-dom/client";
 import { App } from "./App";
-import { router } from "./router";
 import { BASE_URL } from "./constants.ts";
-import { createRoot } from "react-dom/client";
+import { router } from "./router";
 
 const enableMocking = () =>
   import("./mocks/browser").then(({ worker }) =>
@@ -17,7 +17,10 @@ function main() {
   router.start();
 
   const rootElement = document.getElementById("root")!;
-  createRoot(rootElement).render(<App />);
+  hydrateRoot(
+    rootElement,
+    <App data={(window as unknown as { __INITIAL_DATA__: unknown }).__INITIAL_DATA__} query={router.query} />,
+  );
 }
 
 // 애플리케이션 시작