모던 웹 개발에서 페이지 간 이동을 처리하는 방법은 크게 두 가지로 나뉩니다: 서버 라우팅과 클라이언트 라우팅.
이 두 접근 방식은 웹 애플리케이션의 성능, 사용자 경험, 개발 방식에 큰 영향을 미칩니다.
오늘은 두 라우팅 방식의 차이점과 각각의 장단점을 살펴보겠습니다.
서버 라우팅(Server Routing)이란?
서버 라우팅은 전통적인 웹 개발 방식으로, 사용자가 URL을 요청할 때마다 서버가 해당 URL에 맞는 HTML 페이지를 새로 생성하여 클라이언트에게 전송합니다.
작동 방식
- 사용자가 브라우저에서 URL을 입력하거나 링크를 클릭합니다.
- 브라우저는 해당 URL에 대한 HTTP 요청을 서버에 보냅니다.
- 서버는 요청을 처리하고 새로운 HTML 페이지를 생성합니다.
- 서버는 완성된 HTML을 클라이언트에게 보냅니다.
- 브라우저는 이전 페이지를 완전히 버리고 새 페이지를 렌더링합니다.
예시 코드 (Node.js + Express)
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send(`
<html>
<head><title>홈페이지</title></head>
<body>
<h1>홈페이지입니다</h1>
<a href="/about">소개 페이지로 이동</a>
</body>
</html>
`);
});
app.get('/about', (req, res) => {
res.send(`
<html>
<head><title>소개 페이지</title></head>
<body>
<h1>소개 페이지입니다</h1>
<a href="/">홈으로 돌아가기</a>
</body>
</html>
`);
});
app.listen(3000);클라이언트 라우팅(Client Routing)이란?
클라이언트 라우팅은 SPA(Single Page Application) 개발에서 주로 사용되는 방식으로, 초기에 필요한 JavaScript 코드를 모두 다운로드한 후 페이지 전환을 JavaScript로 처리합니다.
작동 방식
- 사용자가 처음 웹사이트에 접속하면 애플리케이션에 필요한 JavaScript 번들을 다운로드합니다.
- 사용자가 링크를 클릭하면, 브라우저는 서버에 새 페이지를 요청하지 않습니다.
- 대신 JavaScript가 URL 변경을 감지하고 History API를 사용하여 브라우저 주소창을 업데이트합니다.
- JavaScript가 DOM을 조작하여 화면 내용을 변경합니다.
- 필요한 데이터만 API를 통해 비동기적으로 가져옵니다.
예시 코드 (React + React Router)
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">홈</Link>
<Link to="/about">소개</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
function Home() {
return <h1>홈페이지입니다</h1>;
}
function About() {
return <h1>소개 페이지입니다</h1>;
}서버 라우팅 vs 클라이언트 라우팅: 주요 차이점
| 특성 | 서버 라우팅 | 클라이언트 라우팅 |
|---|---|---|
| 페이지 로드 | 매 요청마다 전체 페이지 새로고침 | 첫 로드 후 부분적 업데이트만 |
| 서버 요청 | 페이지 전환마다 서버 요청 발생 | 데이터만 필요할 때 API 요청 |
| 초기 로딩 속도 | 일반적으로 빠름 (첫 페이지만 로드) | 상대적으로 느림 (전체 앱 로드) |
| 페이지 전환 속도 | 느림 (전체 페이지 다시 로드) | 빠름 (DOM 조작만 발생) |
| 백엔드 의존성 | 높음 (모든 라우팅 서버에서 처리) | 낮음 (대부분 프론트엔드에서 처리) |
| 브라우저 리소스 | 적게 사용 | 많이 사용 |
| 개발 복잡성 | 상대적으로 단순 | 상대적으로 복잡 |
장단점 비교
서버 라우팅의 장점
- 초기 로딩 속도가 빠름: 필요한 HTML만 다운로드하므로 첫 페이지 로드가 빠릅니다.
- SEO 최적화: 검색 엔진이 완성된 HTML을 크롤링하기 쉽습니다.
- 낮은 클라이언트 자원 사용: 브라우저에서 적은 JavaScript를 실행합니다.
- 개발 단순성: 전통적인 방식으로 구현이 상대적으로 간단합니다.
- 광범위한 브라우저 지원: JavaScript에 의존하지 않아 호환성이 좋습니다.
서버 라우팅의 단점
- 느린 페이지 전환: 매번 전체 페이지를 다시 로드해야 합니다.
- 서버 부하 증가: 모든 페이지 요청이 서버에서 처리됩니다.
- 사용자 경험 제한: 페이지 전환 시 깜빡임이 발생하고 상태 유지가 어렵습니다.
- 대역폭 사용 증가: 중복된 콘텐츠도 매번 다시 다운로드합니다.
클라이언트 라우팅의 장점
- 부드러운 사용자 경험: 페이지 새로고침 없이 빠른 전환이 가능합니다.
- 낮은 서버 부하: 데이터만 요청하므로 서버 부하가 감소합니다.
- 오프라인 지원 가능: 서비스 워커와 함께 사용하면 오프라인 기능도 구현할 수 있습니다.
- 애플리케이션 같은 경험: 네이티브 앱과 유사한 사용자 경험을 제공합니다.
- 상태 유지 용이: 페이지 간 전환 시 상태를 쉽게 유지할 수 있습니다.
클라이언트 라우팅의 단점
- 초기 로딩 시간 증가: 처음에 더 많은 JavaScript를 다운로드해야 합니다.
- SEO 문제: 전통적인 검색 엔진 최적화가 더 어려울 수 있습니다(해결책은 있음).
- 높은 클라이언트 자원 사용: 브라우저에서 더 많은 메모리와 CPU를 사용합니다.
- 개발 복잡성: 상태 관리, 라우팅 등을 클라이언트에서 처리해야 합니다.
- 웹서버 특별 설정 필요: 모든 경로를 index.html로 리다이렉트하도록 서버 설정이 필요합니다.
웹서버 설정: 클라이언트 라우팅을 위한 준비
클라이언트 라우팅을 사용하는 SPA의 경우, 모든 경로를 메인 HTML 파일로 리다이렉트하도록 웹서버를 설정해야 합니다. 이렇게 하면 사용자가 URL을 직접 입력하거나 새로고침을 해도 404 오류가 발생하지 않습니다.
Nginx 설정 예시
server {
listen 80;
server_name example.com;
root /var/www/html;
location / {
try_files $uri $uri/ /index.html;
}
}Apache 설정 예시 (.htaccess)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>어떤 라우팅 방식을 선택해야 할까?
서버 라우팅이 적합한 경우
- SEO가 매우 중요한 콘텐츠 위주 사이트 (블로그, 뉴스 사이트)
- 간단한 웹사이트나 정적 콘텐츠가 많은 사이트
- 클라이언트 자원이 제한된 환경 (저사양 기기 대상)
- 빠른 초기 로딩이 중요한 경우
클라이언트 라우팅이 적합한 경우
- 복잡한 인터랙션이 많은 웹 애플리케이션
- 데스크톱 앱과 같은 경험이 필요한 서비스
- 페이지 간 빠른 전환이 중요한 경우
- 오프라인 기능이 필요한 경우
- 단일 페이지 내에서 다양한 상태 관리가 필요한 경우
현대적인 접근법: 하이브리드 라우팅
최근에는 두 방식의 장점을 결합한 하이브리드 접근법이 인기를 끌고 있습니다:
-
SSR(Server-Side Rendering) + 하이드레이션:
- Next.js, Nuxt.js 같은 프레임워크
- 첫 페이지는 서버에서 렌더링하여 빠른 초기 로딩과 SEO 최적화
- 이후 클라이언트 측에서 JavaScript가 "하이드레이션"되어 SPA처럼 동작
-
정적 사이트 생성(SSG) + 클라이언트 라우팅:
- Gatsby, Next.js의 정적 생성 기능
- 빌드 시점에 모든 페이지를 미리 생성하여 빠른 로딩과 SEO 최적화
- 클라이언트에서 내비게이션은 SPA처럼 처리
결론
서버 라우팅과 클라이언트 라우팅은 각각 고유한 장단점을 가지고 있습니다. 프로젝트의 요구사항, 대상 사용자, 개발 리소스에 따라 적절한 방식을 선택하는 것이 중요합니다.
현대 웹 개발에서는 Next.js, Nuxt.js와 같은 프레임워크를 통해 두 접근 방식의 장점을 결합한 하이브리드 방식이 많이 사용되고 있습니다. 이를 통해 SEO, 초기 로딩 속도, 그리고 부드러운 사용자 경험을 모두 확보할 수 있습니다.
어떤 방식을 선택하든, 웹 개발자로서 각 라우팅 방식의 원리와 장단점을 이해하는 것은 더 나은 웹 애플리케이션을 구축하는 데 큰 도움이 될 것입니다.
