Single Page Application (단일 페이지 애플리케이션)
현재 페이지를 동적으로 렌더링함으로써 사용자와 소통하는 웹 어플리케이션
단일 페이지로 구성되며 서버로부터 최초에만 페이지를 다운로드하고, 이후에는 동적으로 DOM을 구성
- 처음 페이지를 받은 이후부터는 서버로부터 새로운 전체 페이지를 불러오는 것이 아닌, 현재 페이지 중 필요한 부분만 동적으로 다시 작성함
연속되는 페이지 간의 사용자 경험(UX)을 향상
- 모바일 사용량이 증가하고 있는 현재 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요하기 때문
동작 원리의 일부가 CSR(Client Side Rendering)의 구조를 따름
SPA 등장 배경
과거 웹 사이트들은 요청에 따라 매번 새로운 페이지를 응답하는 방식이었음
- MPA(Multi Page Application)
스마트폰이 등장하면서 모바일 최적화의 필요성이 대두되고 모바일 네이티브 앱과 같은 형태의 웹 페이지가 필요해짐
이러한 문제를 해결하기 위해 Vue.js와 같은 프론트엔드(Front-End) 프레임워크가 등장
- CSR(Client Side Rendering), SPA(Single Page Application)의 등장
1개의 웹 페이지에서 여러 동작이 이루어지며 모바일 앱과 비슷한 형태의 사용자 경험을 제공
CSR
- Client Side Rendering
- 서버에서 화면을 구성하는 SSR 방식과 달리 클라이언트에서 화면을 구성
- 최초 요청 시 HTML, CSS, JS 등 데이터를 제외한 각종 리소스를 응답받고 이후 클라이언트에서는 필요한 데이터만 요청해 JS로 DOM을 렌더링하는 방식
- 즉, 처음엔 뼈대만 받고 브라우저에서 동적으로 DOM을 그림
- SPA가 사용하는 렌더링 방식
장점
- 서버와 클라이언트 간 트래픽 감소 - 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한 번 다운로드 후 필요한 데이터만 갱신
- 사용자 경험(UX) 향상 - 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하기 때문
단점
- SSR에 비해 전체 페이지 최종 렌더링 시점이 느림
- SEO(검색 엔진 최적화)에 어려움이 있음(최초 문서에 데이터 마크업이 없기 때문)
SSR
- Server Side Rendering
- 서버에서 클라이언트에게 보여줄 페이지를 모두 구성하여 전달하는 방식
- JavaScript 웹 프레임워크 이전에 사용되던 전통적인 렌더링 방식
장점
- 초기 구동 속도가 빠름 - 클라이언트가 빠르게 컨텐츠를 볼 수 있음
- SEO(검색 엔진 최적화)에 적합 - DOM에 이미 모든 데이터가 작성되어 있기 때문
단점
모든 요청마다 새로운 페이지를 구성하여 전달 - 반복되는 전체 새로고침으로 사용자 경험이 떨어짐, 상대적으로 트래픽이 많아 서버의 부담이 클 수 있음
SSR & CSR
- 두 방식의 차이는 렌더링의 주체가 누구인가에 따라 결정
- 즉, 실제 브라우저에 그려질(렌더링) HTML을 서버가 만든다면 SSR/클라이언트가 만든다면 CSR
- 단순 비교하여 '어떤 것이 좋다'가 아니라, 내 서비스 또는 프로젝트 구성에 맞는 방법을 적절하게 선택하는 것이 중요
'Programming > ETC' 카테고리의 다른 글
JWT(JSON Web Tokens), OAuth(Open Authorization) (0) | 2023.09.24 |
---|---|
[Low-code] 로우 코드 서비스 개발 툴, Retool (0) | 2023.08.28 |
Apache, NginX, Tomcat의 개념(+ 웹서버, WAS, 로드밸런싱, 프록시) (0) | 2023.06.25 |
Command Prompt(CMD), Git bash, PowerShell (0) | 2023.03.27 |
[Node.js] path 모듈 (0) | 2023.03.27 |
댓글