feat: [advanced]ssg 연결

Author: Yuyeol

packages/react/package.json

@@ -13,7 +13,7 @@
     "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",
     "build:without-ssg": "pnpm run build:client && npm run build:server",
-    "build:ssg": "pnpm run build:client-for-ssg && node static-site-generate.js",
+    "build:ssg": "pnpm run build:client-for-ssg && NODE_ENV=production node static-site-generate.js",
     "build": "npm run build:client && npm run build:server && npm run build:ssg",
     "preview:csr": "vite preview --outDir ./dist/react --port 4175",
     "preview:csr-with-build": "pnpm run build:client && pnpm run preview:csr",

packages/react/static-site-generate.js

@@ -1,18 +1,54 @@
-import { renderToString } from "react-dom/server";
-import { createElement } from "react";
 import fs from "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 vite = await createServer({
+  server: { middlewareMode: true },
+  appType: "custom",
+});
 
-  // 어플리케이션 렌더링하기
-  const appHtml = renderToString(createElement("div", null, "안녕하세요"));
+const { mswServer } = await vite.ssrLoadModule("./src/mocks/node.ts");
+mswServer.listen({
+  onUnhandledRequest: "bypass",
+});
 
-  // 결과 HTML 생성하기
-  const result = template.replace("<!--app-html-->", appHtml);
-  fs.writeFileSync("../../dist/react/index.html", result);
+const { render } = await vite.ssrLoadModule("./src/main-server.tsx");
+
+const joinDist = (...pathnames) => path.join("../../dist/react", ...pathnames);
+
+const template = fs.readFileSync(joinDist("/index.html"), "utf-8");
+
+async function generateStaticSite(pathname) {
+  const fullPathname = pathname.endsWith(".html") ? joinDist(pathname) : joinDist(pathname, "/index.html");
+  const parsedPath = path.parse(fullPathname);
+
+  const rendered = await render(pathname, {});
+
+  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>`,
+    );
+
+  if (!fs.existsSync(parsedPath.dir)) {
+    fs.mkdirSync(parsedPath.dir, { recursive: true });
+  }
+
+  fs.writeFileSync(fullPathname, html);
 }
 
-// 실행
-generateStaticSite();
+// 404 생성
+await generateStaticSite("/404.html");
+
+// 홈 생성
+await generateStaticSite("/");
+
+// 상세페이지 생성
+const { getProducts } = await vite.ssrLoadModule("./src/api/productApi.ts");
+const { products } = await getProducts();
+await Promise.all(products.map(async ({ productId }) => await generateStaticSite(`/product/${productId}/`)));
+
+mswServer.close();
+vite.close();