SPA & Routing

SPA(Single Page Application)

SPA는 단일 페이지 애플리케이션으로, 기본적으로 하나의 페이지로 구성되어있다.

기존의 웹 페이지는 서버로부터 요청을 할 때마다 새로고침이 발생하여 웹 페이지 구성에 필요한 리소스를 받는다.

이렇게 기존의 서버로부터 리소스를 받는 형식을 서버 사이드 렌더링(Server-side rendering)이라고 한다.

 

서버 사이드 렌더링(Server-side rendering) 방식은 보통 header, footer 부분을 제외하고 contents 부분을 렌더링 받는데

이때 변하지 않는 부분도 새롭게 랜더링하기 때문에 비효율적인 부분이 있다.

 

반면, SPA의 경우 모든 정적 리소스를 한 번에 전달받아 사용한다.

SPA로 설계된 웹페이지를 보면 화면을 랜더링할때 화면 새로고침 없이 요소를 불러오는 것을 확인할 수 있다.

이 방법은 서버 사이드 렌더링과 반대로 클라이언트의 javascript가 html요소를 내려주는 방식으로, 클라이언트 사이드 렌더링(Clinet-side rendering)이라고 한다.

 

 

Routing

Routing은 Route, 즉 경로를 설정하는 것이다. 현재 화면에서 다른 화면으로 넘어가는 것을 결정하는 기능이다.

 

 

각 랜더링 방식의 장단점

서버 사이드 랜더링 ( Server Side Rendering ) -> 전통적인 랜더링 방식

a 태그에 저장되어있는 링크를 클릭했다고 할때, URL이 PATH에 저장되고, 서버는 랜더링에 필요한 리소스를 전달받는다.

장점

• 페이지마다 URL이 존재해 history관리와 SEO 대응에 문제가 없다.

단점

• 전체 페이지 랜더링에 필요한 리소스를 로딩하기 때문에 불필요한 요소도 재 로딩될 수 있다.
• 용량이 큰 리소스나, 반복적인 리소스를 다운받아야 하기 때문에 속도가 저하될 수 있다.

 

클라이언트 사이드 랜더링 ( Client Side Rendering ) -> Ajax 방식( Asynchronous JavaScript and XML )

자바스크립트를 통해 비동기 방식으로 데이터를 교환하는 방식.href를 사용하지않고, 렌더링에 필요한 리소스를 요청하면 html의 내용을 출력한다.

장점

• 필요한 부분만 랜더링하여 속도가 빠르다

단점

• URL을 사용하지 않기 때문에 history 저장에 어려움이 있다.
  (이전에 뒤로가기를 눌러도 안 먹는 경우가 있었는데 이 방식이 사용된 것으로 보인다.)
• URL이 하나이기 때문에 SEO 이슈에 취약하다.

 

 

검색엔진 최적화(SEO) : 검색엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정

 

 

Vue 공부를 하면서 Vue-router를 경험하게 되었는데

routing에 대한 개념이 부족한 것 같아 정리해보았다.