Skip to content

[7팀 양창훈] Chapter 4-1 성능 최적화 #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yangchanghun wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[7팀 양창훈] Chapter 4-1 성능 최적화 #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"printWidth": 120
"printWidth": 120,
"endOfLine": "auto"
}
4 changes: 2 additions & 2 deletions packages/vanilla/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"type": "module",
"scripts": {
"dev": "vite --port 5173",
"dev:ssr": "PORT=5174 node server.js",
"build:client": "rm -rf ./dist/vanilla && vite build --outDir ./dist/vanilla && cp ./dist/vanilla/index.html ./dist/vanilla/404.html",
"dev:ssr": "set PORT=5174&& node server.js",
"build:client": "rmdir /s /q .\\dist\\vanilla 2>nul & node .\\node_modules\\vite\\bin\\vite.js build --outDir .\\dist\\vanilla & copy /Y .\\dist\\vanilla\\index.html .\\dist\\vanilla\\404.html >nul",
"build:client-for-ssg": "rm -rf ../../dist/vanilla && vite build --outDir ../../dist/vanilla",
"build:server": "vite build --outDir ./dist/vanilla-ssr --ssr src/main-server.js",
"build:ssg": "pnpm run build:client-for-ssg && node static-site-generate.js",
Expand Down
73 changes: 51 additions & 22 deletions packages/vanilla/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,63 @@
import express from "express";
import fs from "node:fs/promises";

const prod = process.env.NODE_ENV === "production";
const port = process.env.PORT || 5173;
const base = process.env.BASE || (prod ? "/front_6th_chapter4-1/vanilla/" : "/");

const templateHtml = prod ? await fs.readFile("./dist/client/index.html", "utf-8") : "";
const app = express();

const render = () => {
return `<div>안녕하세요</div>`;
};

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>Vanilla Javascript SSR</title>
</head>
<body>
<div id="app">${render()}</div>
</body>
</html>
`.trim(),
);
/** @type {import('vite').ViteDevServer | undefined} */
let vite;
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/client", { extensions: [] }));
}

// Serve HTML
app.use("*all", async (req, res) => {
try {
const url = req.originalUrl.replace(base, "");

/** @type {string} */
let template;
/** @type {import('./src/entry-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/server/main-server.js")).render;
}

const rendered = await render(url);

const html = template
.replace(`<!--app-head-->`, rendered.head ?? "")
.replace(`<!--app-html-->`, rendered.html ?? "");

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
app.listen(port, () => {
console.log(`React Server started at http://localhost:${port}`);
console.log(`Server started at http://localhost:${port}`);
});
Loading