feat: 정적 사이트 생성을 위한 SSR 페이지 렌더링 로직 추가 및 파일 시스템 관리 기능 개선

Author: YeongseoYoon

packages/react/src/mocks/handlers.ts

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from "msw";
 import items from "./items.json" with { type: "json" };
-import type { StringRecord } from "../types.ts";
+import type { StringRecord } from "@hanghae-plus/lib";
 import type { Product } from "../entities";
 
 const delay = async () => await new Promise((resolve) => setTimeout(resolve, 200));

packages/react/static-site-generate.js

@@ -1,18 +1,67 @@
-import { renderToString } from "react-dom/server";
-import { createElement } from "react";
-import fs from "fs";
+import fs from "node:fs";
+import path from "node:path";
+import { createServer } from "vite";
 
-async function generateStaticSite() {
-  // HTML 템플릿 읽기
-  const template = fs.readFileSync("../../dist/react/index.html", "utf-8");
+const DIST_DIR = "../../dist/react";
 
-  // 어플리케이션 렌더링하기
-  const appHtml = renderToString(createElement("div", null, "안녕하세요"));
+const createOutputPath = (route) => {
+  if (route.endsWith(".html")) {
+    return path.join(DIST_DIR, route);
+  }
+  return path.join(DIST_DIR, route, "index.html");
+};
 
-  // 결과 HTML 생성하기
-  const result = template.replace("<!--app-html-->", appHtml);
-  fs.writeFileSync("../../dist/react/index.html", result);
-}
+const ensureDirectoryExists = (filePath) => {
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+};
 
-// 실행
-generateStaticSite();
+const buildHtmlContent = (template, pageData) => {
+  return template
+    .replace("<!--app-head-->", pageData.head || "")
+    .replace("<!--app-html-->", pageData.html || "")
+    .replace(
+      "<!--app-data-->",
+      `<script>window.__INITIAL_DATA__ = ${JSON.stringify(pageData.__INITIAL_DATA__ || {})};</script>`,
+    );
+};
+
+const writePage = async (route, renderFn, template) => {
+  const pageData = await renderFn(route, {});
+  const htmlContent = buildHtmlContent(template, pageData);
+  const outputPath = createOutputPath(route);
+
+  ensureDirectoryExists(outputPath);
+  fs.writeFileSync(outputPath, htmlContent);
+};
+
+const generateStaticPages = async () => {
+  const viteServer = await createServer({
+    server: { middlewareMode: true },
+    appType: "custom",
+  });
+
+  const { server: mswServer } = await viteServer.ssrLoadModule("./src/mocks/nodeServer.ts");
+  mswServer.listen({ onUnhandledRequest: "bypass" });
+
+  try {
+    const { render } = await viteServer.ssrLoadModule("./src/main-server.tsx");
+    const template = fs.readFileSync(path.join(DIST_DIR, "index.html"), "utf-8");
+
+    await writePage("/404.html", render, template);
+    await writePage("/", render, template);
+
+    const { getProducts } = await viteServer.ssrLoadModule("./src/api/productApi.ts");
+    const { products } = await getProducts();
+
+    const productTasks = products.map((product) => writePage(`/product/${product.productId}/`, render, template));
+    await Promise.all(productTasks);
+  } finally {
+    mswServer.close();
+    viteServer.close();
+  }
+};
+
+generateStaticPages();