SSR, CSR, SPA

1. SSR(Server Side Rendering)&CSR(Client Side Rendering)+SPA

 

- SSR은 브라우저가 특정 URL을 요청하면 서버가 데이터베이스를 조회하여 완성된 형태의 HTML문서를 동적으로 생성한 후 클라이언트에 응답하는 전통적인 웹 아키텍처입니다.

-> 전체 페이지를 새로고침하여 매번 다시 렌더링을 하면서 발생하는 깜빡임이나, 하나의 데이터만 변경되어도 화면 전체를 다시 만들어 전송해야하는 경우처럼 서버 리소스 및 대역폭을 낭비하는 한계가 있었습니다.

- SPA는 CSR을 기반으로하며 최종 요청 시, 서버는 뼈대만 있는 단일 HTML 파일과 애플리케이션 구동에 필요한 정적 자산을 한 번만 클라이언트에게 전송합니다. 이후 화면 전환이나 데이터 갱신은 전적으로 클라이언트 환경에서 실행되는 JS가 담당하여 REST API를 통해 필요한 순수 데이터만 비동기적으로 교환합니다.

 

- SPA(Single Page Application)의 주요 기술은 Client-Side Routing과 Virtual DOM입니다.

-> Client-Side Routing은 HTML5의 History API 등을 활용하여, 전통 웹의 URL 변경 브라우저가 무조건 서버로 리소스를 요청하지 않고 실제 HTTP 요청을 차단하고 브라우저의 URL 주소만 변경한 뒤, 논리적으로 매핑되어있는 컴포넌트를 화면에 렌더링하는 것입니다.

-> Virtual DOM은 SPA 환경에서는 실제 DOM을 직접 조작하여 화면을 갱신하는 빈도가 늘었는데 DOM 조작은 렌더링 엔진에 막대한 연산 비용을 발생 시키므로 가상의 DOM 트리를 구축하여 이 문제를 해결했습니다.

• 데이터 상태(State)가 변경되면 새로운 가상 DOM을 생성하고 이전 가상 DOM과 비교하여 차이점만 묶어 일괄 반영함으로써 성능을 극대화하였고 실제 DOM 조작 API보다 간단한 선언적 문법을 활용하여 UI를 컴포넌트 단위로 설계합니다.

 

- SPA도 물론 초기 로딩 속도 지연이나 SEO(검색 엔진 최적화)와 같은 한계가 있습니다.

-> SEO(Search Engine Opitmization)이란 검색 엔진(구글 등)에 내 웹 사이트가 잘 노출되도록 최적화하는 것으로 구글의 경우 크롤링, 인덱싱, 랭킹 순으로 동작 진행합니다. SPA의 경우, HTML 안에 내용이 없기 때문에, 인덱싱 실패할 가능성이 있기 때문에 SEO에 불리합니다.