[TIL 15] SPA & Route

1. SPA (Single Page Application)

• 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것
  • 예) 상품 클릭시 전체 페이지가 바뀌는 게 아니라 그 상품 데이터가 담긴 페이지로 교체되는 것 (최소한의 요소만 변경된다.)
• SSR(Server Side Rendering)
  • 기존의 웹은 요청시마다 새로고침이 발생하여 서버로부터 리소스를 받아 렌더링했다.
  • 이렇게 서버가 HTML을 내려주는 방식을 서버 사이드 렌더링(SSR)이라고 부른다.
• CSR(Client-side Rendering)
  • SPA는 처음에 모든 정적 리소스들을 받고, 새로운 페이지 요청시 해당하는 데이터만 전달하도록 하여 필요한 부분만 렌더링되도록 한다.
  • 기존의 SSR과는 반대로 html을 내려주는 방식을 javascript가 한다.
  • 이러한 방식을 클라이언트 사이드 렌더링(CSR)이라고 한다.

2. Route & Routing

• 라우팅이란 출발지에서 목적지까지의 경로를 결정하는 기능이다.
• 사용자가 A 라는 화면에서 B 라는 화면으로 넘어가는 네비게이션을 관리하기 위한 기능을 의미한다.
• 브라우저가 화면을 전환하는 경우
  1. 브라우저의 주소창에 URL을 입력하면 해당 페이지로 이동
  2. 링크를 클릭하면 해당 페이지로 이동
  3. 앞으로가기 뒤로가기를 누르면 웹페이지의 히스토리의 앞 또는 뒤로 이동

3. SPA Routing

3-1. 전통적 링크 방식

• 전통적인 링크방식은 링크 태그를 이용한다.
  • <a href="index.html">go main</a>
  • 링크를 클릭하게 되면 리소스의 경로가 URL의 path에 저장이되고, 서버는 해당 html
    을 클라이언트에 응답한다. (이를 서버 사이드 렌더링이라고 한다.)
• 장점
  • 페이지마다 URL이 존재하여 history 관리 및 SEO 대응에 문제가 없다.
• 단점
  • 전체페이지를 로딩하므로 변경이 불필요한 요소도 로딩된다.
  • 복잡한 웹페이지라면 중복된 html, css, javascript를 계속 다운로드해야 하므로 속도가 저하된다.

3-2. AJAX(Asynchronous JavaScript and XML) 방식

• 자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환하는 방식이다.
  • <a id="main">MAIN</a>
• 전통적 링크방식과는 반대로 href 를 사용하지 않는다. AJAX 를 통해 서버에 필요한 리소스를 요청하고 응답을 하면 html 내의 내용을 갈아치운다.
• ajax 방식은 내비게이션 클릭 이벤트를 캐치하고 preventDefault 메서드를 사용해 서버로의 요청을 방지한다. 이후, href 어트리뷰트에 path을 사용하여 ajax 요청을 하는 방식이다.
• ajax는 주소창의 URL을 변경시키지 않으므로, 브라우저의 뒤로가기, 앞으로가기 등의 history 관리가 동작하지 않는다.
• 장점
  • 필요한 부분만 렌더링을 하므로 기존의 방식보다 속도가 빠르다.
• 단점
  • URL 의 변경이 없으므로 앞으로가기, 뒤로가기 등의 history 관리가 되지 않는다.
  • URL이 하나이므로 SEO 이슈가 발생할 수 있다.
  • history 관리가 되지 않는다. (history.back(), history.go(n) 등이 동작하지 않는다.)

3-3. Hash 방식

• Hash 방식은 URI의 fragment identifier(#service)의 고유 기능인 anchor 앵커를 사용한다.
  • <a href="#main">MAIN</a>
• URL이 동일한 상태에서 hash만 변경되면 브라우저는 서버에 어떠한 요청도 하지 않는다. 즉, URL의 hash는 변경되어도 서버에 새로운 요청을 보내지 않으며 따라서 페이지가 갱신되지 않는다.
• 페이지가 갱신되지 않지만 페이지마다 고유의 논리적 URL이 존재하므로 history 관리에 아무런 문제가 없다.
• 장점
  • history 관리가 가능하다.
• 단점
  • hash 방식은 과도기적 기술이다.
  • 웹 크롤러는 자바스크립트를 실행시키지 않기 때문에 hash 방식으로 만들어진 사이트의 콘텐츠를 수집할 수 없어 SEO 이슈가 발생할 수 있다.

3-4. pjax 방식

• pjax 방식은 History API인 pushState와 popstate 이벤트를 사용한 pjax(pushState + ajax) 방식이다.
  • <a href="/main">MAIN</a>
• pjax 방식은 내비게이션 클릭 이벤트를 캐치하고 preventDefault 메서드를 사용해 서버로의 요청을 방지한다. 이후, href 어트리뷰트에 path을 사용하여 ajax 요청을 하는 방식이다.
• pushState 메서드는 주소창의 URL을 변경하고 URL을 history entry로 추가하지만 서버로 HTTP 요청을 하지는 않는다.
• pjax 방식은 서버 렌더링 방식과 ajax 방식이 혼재되어 있는 방식으로 서버의 지원이 필요하다.
• 장점
  • history 관리가 가능하다.
  • hash를 사용하지 않아 SEO 이슈가 없다.