단일 페이지 웹 어플리케이션

일반 웹 어플리케이션

• URL 변경 시 모든 페이지를 새로 로드
• 서버에서 클라로 html 전송
  • JS, CSS 다시 서버로 요청

단일 페이지 웹 어플리케이션

• URL 변경 시 화면 일부분만 동적으로 렌더링
• AJAX 이용해서 대부분의 리소스(HTML, CSS, Script)는 한 번만 로드
• JSON 같은 데이터만 실행 중에 로드하고, 관련 화면 변경

시간흐름에 따른 페이지 로딩절차 비교

서버사이드 라우팅 처리

• 요청 URL에 매핑되는 리소스 반환
• 일반적인 웹 어플리케이션

클라이언트 라우팅 처리

• SPA 특성 활용
  • 클라이언트에서 동적으로 화면 렌더링
  • URL 변화에 따라 화면 상태 변경
• HTML 5 히스토리 API 사용 가능
• #, $ 처리 가능