[Web] SPA(Single Page Application)와 CSR(Client Side Rendering)

전통적인 웹 방식

지난 포스팅에서, 웹은 클라이언트 (Client)와 서버(Server)로 나누어진다고 했다. 클라이언트(브라우저)가 하는 역할은 서버로 지속적인 요청을 보내는 일이다. 흔히 우리가 주소창에 www.naver.com를 검색을 하는 과정은 ‘www.naver.com에 해당하는 페이지를 내려줘!’라고 클라이언트가 서버에 요청을 보내는 것이고 서버는 요청을 보고 ‘이 요청에 대해서는 이 정보를 응답해줘야지!’하고 알맞은 html을 응답해준다. 그러면 클라이언트는 이 응답받은 html 문서를 보고 문서를 바탕으로 DOM에 html을 그린다. (DOM을 그리면서 CSS + Javascript 코드를 함께 로드한다!)

→ 즉 전통적인 웹은 요청을 보낼 때 마다 페이지에 해당하는 html을 매~번 새로 내려줬다. 그렇게 전체 페이지를 다시 렌더링하는 과정 중에 화면 깜빡임(페이지 리로드)가 발생했고 변경이 필요 없는 부분이 있음에도 페이지를 매번 새로 내려줘야 하니 서버에 부하가 걸렸다.

그렇게 등장한 SPA(Single Page Application)

이 때, AJAX라는 기술이 등장한다. AJAX란 사용자가 요청을 보내면 그 요청에 해당하는 응답의 일부분만 업데이트 할 수 있는 기술이다. 이 개념을 바탕으로 SPA(Single Page Application)가 등장하게 됐는데 url을 움직이더라도 html을 다시 내려주지 않는 컨셉이다. (우리가 흔히 아는 Angular, Vue, React가 바로 이 SPA를 지원하는 라이브러리들이다)

그리고 이 SPA는 Client Side Rendering 방식으로 동작하는데, 전통적인 웹 동작 방식(브라우저가 서버에서 받은 html을 DOM에 그리는 것)과 다르게, CSR(Client Side Rendering)은 서버에서 HTML을 내려 받는 것이 아니라, 클라이언트(브라우저)가 알아서 화면에 그리는 개념이다.

브라우저가 직접 화면에 그린다는게 뭔데🤔.. 그거 어떻게 하는건데..❓

백문이 불여일견이다. 직접 리액트로 구현한 프로젝트를 브라우저 개발자도구를 통해 살펴보자.

이 일정 관리 어플리케이션은 순수 리액트로만 구현되어 있다. 이 프로젝트를 브라우저에서 열고, 개발자도구를 열어 네트워크 요청을 확인해보자. 네트워크에 Doc(문서)를 클릭해보면, 서버에서 내려준 html을 확인할 수 있다.

이 요청에 대한 응답(Response) 탭을 보면, 엥?