라우팅
라우팅은 URL에 따라 다른 콘텐츠를 제공하는 메커니즘이에요.
SSR에서 라우팅:
1. 서버가 요청 URL을 분석
2. 해당 URL에 맞는 컴포넌트 선택
3. 렌더링 후 HTML 반환
클라이언트 라우팅 | 서버 라우팅 | |
실행 위치 | 브라우저 | 서버 |
페이지 전환 | JavaScript로 DOM 교체 | 새 HTML 요청 |
초기 로드 | 빈 HTML + JS 번들 | 완성된 HTML |
왜 라우팅이 필요한가?
지금까지는 단일 URL(/)만 처리했어요. 실제 애플리케이션은 /, /about, /posts/1 등 여러 페이지가 필요해요.
서버 라우팅 구현하기
HTML 보일러플레이트 추출
여러 페이지를 다루기 전에, 4-1에서 반복되던 HTML 템플릿을 헬퍼 함수로 추출할게요.
// server.ts
function wrapHtml(content: string) {
return `
<!DOCTYPE html>
<html>
<body>
<div id="root">${content}</div>
<script type="module" src="/client.tsx"></script>
</body>
</html>
`;
}
TypeScript
복사
이제 라우트마다 이 함수를 재사용할 수 있어요.
URL별로 다른 컴포넌트 렌더링
가장 직관적인 방법은 서버에서 URL에 따라 다른 컴포넌트를 렌더링하는 거예요.
// server.ts
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
app.get("/", (c) => {
const html = renderToString(<Home />);
return c.html(wrapHtml(html));
});
app.get("/about", (c) => {
const html = renderToString(<About />);
return c.html(wrapHtml(html));
});
app.get("*", (c) => {
const html = renderToString(<NotFound />);
return c.html(wrapHtml(html), 404);
});
TypeScript
복사
중복 코드 줄이기
위 코드에서 반복되는 패턴이 보여요. renderToString → wrapHtml → c.html 흐름이죠. 헬퍼 함수로 추출할 수 있어요.
// server.ts
function renderPage(c: Context, Component: React.FC, status = 200) {
const html = renderToString(<Component />);
return c.html(wrapHtml(html), status);
}
app.get("/", (c) => renderPage(c, Home));
app.get("/about", (c) => renderPage(c, About));
app.get("*", (c) => renderPage(c, NotFound, 404));
TypeScript
복사
동적 라우팅
/posts/1, /posts/2 같은 동적 URL은 어떻게 처리할까요? Hono에서는 :param 문법을 사용해요.
// server.ts
app.get("/posts/:id", (c) => {
const id = c.req.param("id");
const html = renderToString(<Post id={id} />);
return c.html(wrapHtml(html));
});
TypeScript
복사
URL 파라미터를 추출해서 컴포넌트에 전달해요. /posts/42 요청이 오면 id가 "42"가 돼요.
// pages/Post.tsx
function Post({ id }: { id: string }) {
return <h1>Post #{id}</h1>;
}
TypeScript
복사
정리: 라우팅의 본질
결국 라우팅은 “URL을 분석해서 적절한 컴포넌트를 렌더링하는 것”이에요.
URL 요청 → URL 파싱 → 컴포넌트 선택 → 렌더링 → HTML 응답
Plain Text
복사
페이지가 많아지면 라우트 등록이 번거로워져요. 프레임워크는 이 반복 작업을 자동화해요 (파일 기반 라우팅 등). 하지만 내부적으로는 같은 원리예요.
