[CSR] 클라이언트 사이드 렌더링

기존의 MPA 방식

---

기존 웹은 요청 시마다 새로고침이 발생해서 서버로부터 리소스들을 받아 렌더링하는 방식이었다. 서버가 해당하는 HTML을 주는 방식을 SSR(Server Side Rendering)이라고 한다. 대체로 헤더나 푸터는 그대로인데 전체를 다 렌더링하면 비효율적이다. 불변하는 정보도 다 받기 때문이다. SPA와 반대로 MPA에서는 서버로 form 데이터를 전달해서 새로운 페이지 렌더링을 요청하게 된다. 기존에는 SPA와 반대되는 MPA(Multi Page Application) 디자인 패턴으로 많이 개발되었다

다른 페이지로 넘어갈 때 URL도 바뀌고 서버로 들어가는 요청에 응답으로 HTML 파일을 건네서 완전히 새로운 페이지로 넘어가는 것이다. HTML 파일을 건네면 굳이 다시 그리지 않아도 되는 헤더 푸터 등까지 다 같이 전달하게 돼서 트래픽이 늘어나기 때문에 부담이 생기고 느려진다. 하지만 쇼핑몰 사이트를 운영하거나 콘텐츠 배포 등 여러 카테고리가 필요하다면 MPA 방식이 적합할 수도 있다
-> 구글이나 네이버같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 구동하는데, MPA의 경우 요청시마다 HTML 파일을 받아오기 때문에 검색 엔진 최적화(SEO)가 좋다

검색 엔진 최적화(SEO)❓
Search Engine Optimization의 약어로 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 페이지를 구성하여 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 검색 결과가 상위에 나오게 된다면 방문 트래픽이 늘어난다. 때문에 인터넷 마케팅의 수단으로 이용되기도 한다.

 

 

SPA (Single Page Application)

---

어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA이다. 뭔가를 클릭하거나 스크롤하면 상호작용하기 위한 최소한의 요소만 변경이 일어난다. 페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다

SPA는 클라이언트사이드렌더링 방식이다

 

Ajax의 역할 ❓
SPA가 Ajax를 쓰기도 하지만 MPA에서도 ajax를 쓸 수 있다. SPA와 ajax는 서로 포함하는 관계는 아니지만 SPA를 구현하는 하나의 방법으로서 ajax가 존재한다.
SPA는 어느 경로로 접속하든 똑같은 html 문서와 js 파일을 받는다. js가 실행되면서 API로 데이터를 불러오고 마크업으로 화면을 보여주고 사용자의 이동에 맞춰 push state로 히스토리를 바꿔주며 페이지를 보여준다. 실제로는 모두 프론트엔드단에서 처리되는 것들이다.

 

CSR (Client Side Rendering)

---

클라이언트 사이드 렌더링은 SPA로, 클라이언트 사이드에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행하는 것을 말한다. 점점 더 복잡해지는 웹 페이지를 구현하기 위해서 전통적인 방식의 SSR보다는 CSR로 웹을 구현하는 경우가 더 많아지고 있다

 

CSR 방식에서는 번들링이 완료된 JS 파일을 모두 로드하기 전에는 첫 페이지를 로드할 수가 없다. 엄연히 말해서 첫 페이지는 이미 로드가 되었지만, 로드된 페이지는 빈 HTML 파일이다. 실제로 npx create-react-app ... 실행 후 public/index.html 파일을 확인해보면 다음과 같이 구성되어 있다

 

...
<div id='app'></div>
...

 

즉 유저는 로딩이 완료되기까지 그저 빈 화면을 보고 있을 수 밖에 없다. 또한 첫 페이지가 위와 같은 빈 화면이라는 말은 검색 엔진이 해당 문서를 바라볼 때 기입된 내용이 없기 때문에 SEO 최적화에도 많은 어려움이 따른다

 

CSR의 장점
1. 초기 로딩 속도를 제외하면 나머지 부분은 매우 빠른 사용자 인터랙션 속도를 보여준다. 이미 다운받은 번들링 된 js 파일에 렌더링에 필요한 모든 로직이 들어있기 때문
2. 따라서 새로고침이나 화면 깜빡임등이 (개발자가 의도한 상황이 아닌 이상) 발생하지 않는다. 이는 UX에 엄청난 이점을 가져다 준다
3. 서버가 클라이언트 뷰(View)단에서 처리할 일을 더이상 신경쓰지 않아도 된다.

 

동작과정
- 처음 웹 서버에 요청할 때, 데이터가 없는 문서를 반환한다.
- HTML 및 static 파일들이 로드된다. 이때, 데이터가 있다면 데이터 또한 서버에 요청하여 화면에 나타낸다.
- 브라우저가 서버에 HTML과 static 파일을 요청한 후 로드되면, 사용자의 상호작용에 따라 JavaScript를 통해 동적으로 렌더링을 한다.
- 필요에 따라 데이터를 서버에 요청해서 받아와 렌더링 한다.

 

React JS를 사용하는 이유 ❓

 

React JS의 장점
SSR과 달리 CSR방식은 서버로부터 데이터를 받아 클라이언트에서 렌더링 하는 방식이다. 때문에 다음과 같은 장점을 가진다.
- 바뀐 부분만 렌더링한다.
- 단위(Component)를 나눠서 관리가 가능하다.
- 코드의 재사용성을 높여준다.

 

가상 DOM (Virtual DOM)
기존에는 DOM전체를 직접 접근하여 조작한 후, 브라우저에서 화면을 나타내는 방식이었다. 하지만 이 방식은 HTML, CSS, JavaScript파일을 리렌더링 하기 때문에 느려지는 단점이 있다. 그래서 페이스북에선 React JS를 View의 변형이 아닌 기존 뷰를 날리고 가상 DOM을 이용하여 실제 DOM을 조작하는 횟수를 줄여 성능을 개선시켰다. 참고로 데이터가 변경되면, React에선 가상 DOM을 다시 변경하고, 이전의 가상 DOM과 비교하여 변경된 부분을 체크하고 변경된 부분만 실제 DOM에 적용한다.