SPA ?
SPA('Single Page Application) 단일 페이지로 구성된 웹 애플리케이션을 의미한다.
SPA 등장 이전 웹 애플리케이션을 구성하던 방식인 서버 사이드 렌더링 SSR 의 경우,
화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리스스를 렌더링 했다.
하지만 SPA 의 경우 렌더링의 역활을 서버에게 넘기지 않고 브라우저에서 처리하는 방식이다.
웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하고, 이후 새로운 페이지 요청 시
페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하게 된다.
SPA 이전에는 웹 페이지의 네이게이션에 사용되는 하이퍼 링크를 클릭할 때마다 서버에 요청을 보내고 전체 페이지를 다시 로드하는 방식이 일반적이였다. 이로 인해 사용자 경험이 느리고 끊긴다는 경험을 줄 수 있었다.
SPA 는 이러한 문제를 해결하기 위해 동적인 컨텐츠 업데이트를 가능하게 하는 기술로
2002년 넷스케이프에서 초기 개념이 등장하였고 2005년에 SPA 라는 기술의 개념을 확립시켰다.
그 이후로 SPA 의 개념은 발전하고 웹 개발 프레임워크와 라이브러리가 등장하게 되면서 보다 쉽고 강력한 SPA 개발이 가능해졌다.
대표적으로 AngularJs Ember.js Backbone.js 등의 프레임 워크와 React Vue 등의 라이브러리가 있다.
이러한 도구들은 SPA 개발을 위한 강력한 기능과 생산성을 제공하면서 웹 어플리케이션의 사용자 경험을 향상시켜주며 모바일 애플리케이션 개발에도 큰 영항을 주게 되었다.
SSR
Server Side Rendering 은 웹 애플리케이션의 렌더링 방식 중 하나로, 서버에서 웹 페이지의 완전한 HTML 을 생성하여 클라이언트에게 전달하는 방식이다.
일반적으로 SSR 에서 웹 페이지의 로드시에 서버에서 필요한 데이터를 가져와 HTML 템플릿에 적용하여 렌더링하게된다.
- 장점
- 검색 엔진 최적화
완전한 HTML 을 생성하기 때문에 검색 엔진이 페이지의 내용을 쉽게 인식하고, 적절하게 노출시킬 수 있다.
- 보안
SSR 은 클라이언트 측에서 사용자 데이터나 중요한 로직을 처리하지 않고 서버에서 렌더링 하기 때문에 클라이언트 측에서 발생할 수 있는 일부 보안 취약점을 완화할 수 있어 보안에 더욱 더 안정적이다.
- 페이지 로딩 속도
해당 페이지의 문서만 브라우저에게 전달하여 렌더링이 되기 때문에 로딩 속도가 SSR 에 비해 빠르다.
- 단점
-
사용자가 새로고침을 하게 되면 전체 웹 사이트를 다시 서버에서 받아와야 하기 때문에 화면이 사라진뒤 나타나게 되버린다.
UX적인 관점에서 바라보게 된다면 썩 유쾌한 경험은 아닐 것 이다. -
이용자가 많을수록 서버에 데이터를 요청하는 횟수가 많아지므로 서버에 과부하가 걸리기 쉽다.
-
사용자가 사이트를 볼 수 있는 시간
Time To View과 실제로 인터랙션이 가능한 시간Time To Interact의 공백시간이 상당히 길다.
CSR
Client Side Rendering 은 웹 애플리케이션의 렌더링 방식 중 하나로, 웹 애플리케이션의 렌더링을 클라이언트 측에서 처리하는 방식이다.
CSR 은 웹 페이지를 요청하면 서버에서 HTML,CSS,JavaScript 과 같은 정적 파일을 제공하게 된다.
이후 JavaScript 를 이용하여 클라이언트 측에서 컨텐츠가 생성된다.
- 장점
- 사용자 경험
CSR 은 페이지의 일부분만 업데이트 하고, 전체 페이지를 다시 로드하지 않고 동적으로 컨텐츠를 변경할 수 있는 기능을 제공하게 된다. 이로 인해 웹 애플리케이션의 동작이 더 빠르고 부드럽다는 경험을 줄 수 있다.
- 서버 부하 감소
SSR 과 달리 CSR 은 서버에서 전체 페이지의 렌더링을 처리하지 않고 클라이언트에서 렌더링 작업을 수행하므로 서버 부하를 줄일 수 있다.
- 클라이언트 측 템플릿 처리
CSR 은 클라이언트 측에서 데이터를 가져와서 동적으로 파싱하는 방식이므로 클라이언트 측에서 템플릿 처리가 가능하다. 이는 개발자가 보다 유연하고 강력한 UI 기능을 구현할 수 있게 해준다.
- 단점
- 초기 로딩 속도
CSR 은 초기에 빈 페이지를 로드하고, 필요한 데이터를 비동기적으로 가져와서 렌더링 하는 방식이기에 처리할 데이터가 많다면 이로 인해 초기 로딩 속도가 느릴 수 있다. 사용자는 이럴 경우 스켈레톤 레이아웃을 보게된다. 이러한 경우가 많다면 사용자 경험을 저하 시킬 수 있다.
- 검색 엔진 최적화 문제
초기 페이지 로딩시에 HTML 콘텐츠가 비어있는 경우가 많다. 검색 엔진은 페이지의 내용을 크롤링하여 색인화를 진행하는데 CSR 은 초기 로딩시에 콘텐츠가 없으므로 검색 엔진이 인식하기 어려울 수 있다.
하지만 최근에는 일부 검색 엔진이 CSR 을 처리하는데 더 나은 지원을 제공하고있다.
- 보안 취약성
클라이언트 측에서 데이터를 처리하고 UI 를 생성하기 때문에, 악의적인 사용자가 클라이언트 코드를 조작하거나 데이터를 탈취하는 등의 보안 취약성이 존재할 수 있다. 적절한 보안대책을 세워 이러한 취약성을 보완해야 한다.
