[Angular] 서버와 클라이언트에서 구성하는 라우팅의 비교

핵심 아키텍처 차이점

서버사이드 라우팅

• 요청 처리 방식: 모든 라우팅 요청이 서버에서 직접 처리됨
• 상태 관리: 각 요청이 독립적으로 처리되며, 서버 세션을 통해 상태 관리
• 렌더링 프로세스: 서버에서 완전한 HTML을 생성하여 전송
• 초기 로딩: 각 라우트 변경 시 전체 페이지 리로드 필요

클라이언트사이드 라우팅

• 요청 처리 방식: History API를 활용한 브라우저 내 라우팅 처리
• 상태 관리: 클라이언트 메모리에서 애플리케이션 상태 유지
• 렌더링 프로세스: 초기 로드 후 필요한 컴포넌트만 동적 렌더링
• 초기 로딩: SPA 특성상 초기 번들 크기가 큼

구현 예시

서버사이드 라우팅 (Node.js/Express)

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('홈 페이지');
});

app.get('/about', (req, res) => {
  res.send('소개 페이지');
});

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중입니다.');
});

클라이언트 측 라우팅(Client-side Routing)

클라이언트 측 라우팅은 웹 애플리케이션이 로드된 후 클라이언트 측에서 라우팅을 처리하는 방식입니다. 주로 JavaScript 프레임워크(예: Angular, React, Vue.js)를 사용하여 구현됩니다.

// app-routing.module.ts 파일에서 라우트 설정을 추가합니다.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

<!-- app.component.html -->
<nav>
  <ul>
    <li><a routerLink="/">홈</a></li>
    <li><a routerLink="/about">소개</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

클라이언트사이드 라우팅 (Angular 16+ Standalone)

// routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    providers: [
      // 라우트 레벨 프로바이더
    ]
  },
  {
    path: 'about',
    loadComponent: () => import('./about/about.component')
      .then(m => m.AboutComponent),
    // 지연 로딩 구현
  }
];

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
    <nav>
      <a routerLink="/">홈</a>
      <a routerLink="/about">소개</a>
    </nav>
    <router-outlet />
  `
})
export class AppComponent {}

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  template: '<h1>홈 페이지</h1>'
})
export class HomeComponent {}

주요 기술적 고려사항

성능 최적화

• 서버사이드:

  • 초기 페이지 로드 최적화
  • 서버 캐싱 전략 구현
  • CDN 활용

• 클라이언트사이드:

  • 코드 스플리팅
  • 지연 로딩
  • 상태 관리 최적화

보안 고려사항

• 서버사이드:

  • CSRF 보호
  • 세션 관리
  • 서버 측 인증

• 클라이언트사이드:

  • JWT 토큰 관리
  • XSS 방지
  • 라우트 가드 구현

SEO 최적화

• 서버사이드: 기본적으로 SEO 친화적
• 클라이언트사이드: SSR/SSG 구현 필요

결론

현대 웹 애플리케이션에서는 두 방식을 하이브리드로 활용하는 것이 일반적입니다. Angular Universal과 같은 도구를 사용하여 서버사이드 렌더링과 클라이언트사이드 라우팅의 장점을 모두 활용할 수 있습니다.