싱글 페이지 애플리케이션(SPA)과 클라이언트 사이드 렌더링(CSR)

클라이언트 사이드 렌더링, 일명 CSR이란?

지금까지는 서버에서 HTML을 주는 대로 렌더링 했지만 자바스크립트로 할 수 있는 게 많아지자, 개발자들은 산에 올라보기로 한다. 서버에서는 최소한의 HTML을 한 번만 받고, 나머지 화면을 전부 자바스크립트로만 그리기로 한 것이다. 이제부터 적어도 웹 애플리케이션의 View 만큼은 최초 로딩 후 서버와 완벽히 분리되었다. 프론트엔드와 백엔드가 구분되기 시작한 것이다.

 

CSR에서의 브라우저 렌더링 시나리오

멀티 페이지 애플리케이션(MPA)의 라우팅 방식을 생각해보면 새 술은 새 부대에 담듯, 새로운 화면은 새로운 HTML에 담아 보여주었다. 하지만 물 마실 때마다 매번 머그컵을 내다버린다면 얼마나 큰 낭비일까? 컵은 그대로 두고 정수기에서 물만 다시 채워서 먹는 방법이 더 효과적일 것이다.

 

기존 MPA에서 새로운 화면을 보기 위해 HTML을 새로 받아오면 아래와 같은 절차를 거쳐야 했다.

1) 전체 화면이 하얗게 날아가고 → 2) 서버와 통신하여 새로운 HTML을 받아온 뒤 → 3) HTML 문서가 로딩되면 문서 안에서 보여줘야 하는 사진, 동영상 등의 콘텐츠를 다운로드 

 

하지만 이제는 화면을 바꾸는데 필요한 데이터만 API 호출을 통해 JSON 객체로 받아온 뒤, 해당 부분의 데이터만 갈아끼우는 방식으로 화면을 만들 수 있게 되었다. 하나의 HTML 만을 가지고도 다채로운 화면을 그릴 수 있다면 앞서 언급했던 불필요한 통신으로 인한 오버헤드를 줄일 수 있을 것이다.

 

1. 브라우저에서 서버로 웹 페이지를 조회하고 싶다는 요청을 보낸다.
2. 서버는 브라우저로부터 날아온 요청 경로를 확인(/)하고 index.html 을 서버 내 자원으로부터 찾아 응답으로 돌려준다. 이때 index.html의 body 태그 내부는 비어있는 상태다.
3. 브라우저는 HTML 파일에서 head 태그를 읽으며 추가로 필요한 자원(index.js, index.css 등)을 서버로 다시 요청한다.
4. 엔트리 역할을 하는 자바스크립트 파일이 다운로드 → 로딩 → 실행되고, 자바스크립트 앱은 미리 프로그래밍 된 로직에 따라 DOM API를 활용해 화면에 태그들을 그려 넣는다.
5. 초기 로딩 이외의 변경이 필요할 때는 서버 API에 요청하여 받아온 데이터로 새롭게 갈아 끼운다.
6. SPA / CSR 상황에서 페이지 이동(라우팅)이 필요할 때는 브라우저 경로를 변경하면 트리거 되는 기본 HTTP GET 요청은 막되 브라우저 주소는 변경된 상태를 유지하도록 한 다음 변경을 감지하여 DOM API가 다른 페이지에 알맞은 화면을 그리도록 한다.

 

정리

SPA 방식으로 CSR을 구현한 웹 서비스는 최초 통신을 할 때 렌더링에 필요한 모든 재료들을 브라우저에 가져다 놓고그려야 하는 화면에 맞춰 재료를 알맞게 조립하는 방식이며, 추가로 필요한 재료들은 필요한 시점에 필요한 만큼만 서버에서 받아온다. 이렇게 구현했을 경우 페이지 전환이 부드러우며 기존 방식에 비해 훨씬 동적이고 유려한 UX를 보여줄 수 있다.