[CSR] 클라이언트사이드 랜더링이란?

클라이언트사이드 랜더링(CSR)에 대해 알아보자.

리엑트 과정을 공부하기 전, 먼저 강의의 목차를 보았는데 SPA가 있어 구글에 검색을 해보았다. 이랜서의 글을 보고있는데, SPA와 SSR비교 글을 보게되었고 SSR을 또 찾아보다가 CSR까지 오게되버렸다.. 아직 개념에 대해 잘 모르니 CSR 부터 공부하기로 했다.

클라이언트사이드 랜더링 (CSR)

클라이언트사이드 랜더링(Client-Side Rendering, CSR)은 영어만 보면 고객 입장에서의 랜더링? 으로 이해했는데 웹 페이지의 콘텐츠가 브라우저에서 랜더링되는 방식이라고 한다. 서버는 초기 HTML파일과 JavaScript 코드를 클라이언트(브라우저)로 전송하고, 이 코드를 실행하여 동적으로 콘텐츠를 생성하고 랜더링한다.

CSR의 장점과 단점

2-1) 장점

1. 향상된 사용자 경험
   • 초기 로딩 이후의 페이지 전환이 빠르고 부드럽다. 왜냐하면 JavaScript가 브라우저 내에서 실행되며, 페이지 전환 시 전체 페이지를 다시 로드하지 않고 필요한 데이터만 갱신하기 때문!
2. 감소된 서버 부하
   • 서버는 단순히 HTML 템플릿과 JavaScript 파일을 제공하므로, 서버에서의 데이터 처리 및 랜더링 작업이 줄어들고 결과적으로 서버의 부하가 줄어들며 더 많은 요청을 효율적으로 처리가 가능함
3. 더 나은 상호작용성
   • 클라이언트에서 실행되는 JavaScript로 인해 복잡한 사용자 인터페이스와 동적 기능을 쉽게 구현할 수 있음. 예를들면, 사용자가 버튼을 클릭할 때 새로운 콘텐츠가 즉시 로드되거나, 애니메이션이 실행되는 등 상호작용이 가능함

2-2) 단점

1. 초기 로딩 시간
   • 브라우저가 처음 서버로부터 HTML,CSS,JavaScript를 모두 받아야하고 이후 JavaScript가 실행되어 콘텐츠를 랜더링하기 때문에 초기 로딩시간이 길어질 수 있음. 특히 네트워크 속도가 느리거나 사용자의 기기가 저사양인 경우 더 길어질 확률이 높음
2. SEO
   • 많은 검색 엔진 크롤러는 JavaScript를 제대로 실행하지 못함. 즉, CSR을 사용하면 검색 엔진이 페이지의 실제 콘텐츠를 인덱싱하지 못해 SEO성능이 떨어질 수 있음.. 이를 해결하기 위해선 SSR(서버사이드 랜더링)을 사용하면 된다구함
3. 상태관리
   • CSR에선 클라이언트 측에서 다양한 상태를 관리해야함, 상태란 UI,애플리케이션 데이터,폼 등 여러가지가 있는데 클라이언트 상태와 서버 상태를 동기화해야하고 여러 컴포넌트가 동시에 상태 변경이 되면 효율적으로 처리하기가 어려움이 있음. (최대한 이해해보려 하지만 어려움)
   • 내가 이해한 내용: 만약 쇼핑몰 사이트에서 내가 장바구니에서 무언갈 추가했을 때, DB에는 값이 담기지만 그 변경된 값이 나의 화면에서 업데이트가 되지 않는다면? 이런 상태관리로 이해중

CSR의 실행 과정

다시 한번 정리해보면 CSR은 결국 클라이언트(브라우저)에서 처리한다는 것을 의미함. 대화 하는 느낌으로 한번 알아보자

3-1) 로딩 과정

1. 나(사용자) : url 들어가도 될까?
   • 웹사이트 URL 입력중..
2. 브라우저 : 잠깐 ㄱㄷㄱㄷ, CDN에게 요청할게!
   • 서버에 요청함
3. CDN(콘텐츠 전송 네트워크) : ㅎㅇ 여기 HTML,JavaScript파일들이 있음 이걸로 페이지를 시작해봐!
   • HTML,JavaScript 파일의 링크를 클라이언트에 전송함
4. 브라우저 : 오우 땡큐! 다운로드할께!
   • CDN으로 전달받은 파일을 다운로드함
5. 브라우저 : 사용자야 널 위해 HTML 파일을 열어볼께!
   • HTML 파일을 로드하며 이 파일에 최소한의 구조 및 스크립트 태그가 포함되어 있음
6. 브라우저 : JavaScript 파일도 다운로드가 끝났어 이제 실행할께!
   • JavaScript 파일을 실행함
7. JavaScript : 안녕 난 자스! 이제 서버한테 데이터를 가져와서 동적으로 페이지를 구성할께!
   • 서버에 데이터를 요청하고 받아옴
8. 서버 : 요청하신 데이터를 대령하겠습니다!
   • JSON 형식으로 데이터를 클라이언트에 전송함
9. JavaScript : 데이터 고마워! 이제 페이지 완성할께!
   • 데이터를 이용해 동적으로 HTML을 생성하고 페이지를 랜더링함
10. 브라우저 : 오우 모든일이 완료되었군! 이제 완성된 페이지를 보여줄께!
    • 사용자에게 완성된 웹 페이지를 보여준다.
11. 사용자 : 와.. 단지 url을 들어갔을 뿐 인대 너희 일처리가 멋찐걸?

3-2) 페이지 상호작용

1. 페이지 완성 : 3-1) 로딩 과정의 대화
2. 사용자 : 오우 이제 뭐할까 장바구니에 상품을 추가해볼까?!
   • 장바구니 추가 버튼을 클릭함
3. JavaScript : 상품이 추가되었어! 기다려봐 UI를 즉시 업데이트할께!
   • 장바구니 UI를 동적으로 업데이트함
4. JavaScript : 좋아 이제 추가된 상품 정보를 서버에 전송해서 상태를 동기화해야지!
   • 서버에 장바구니 데이터를 전송함
5. 서버 : 장바구니 정보 업데이트를 받았어요! 데이터베이스에 저장할께욧!
   • 장바구니 데이터를 저장함
6. 브라우저 : ㅎㅎ 짜식들 열일하는구만! 모든 작업이 완료되었어요! 이 과정을 통해 페이지를 새로고침 하지 않고 최신 상태를 반영할 수 있답니다.
   • 사용자에게 최신 장바구니 상태를 보여줌
7. 사용자 : 와.. 능력자들!!

사실 공부하는데 너무 졸리기도 해서 대화하는식으로 작성해보니 재밌었다. 이 대화 형식은 결국 사용자, 브라우저,CDN, 서버, JavaScript간의 상호작용으로 이해하면 좋을 것 같다.

마무리

CSR에 대해 공부해보았는데, 웹의 동작원리 중 한가지로 생각한다. 다시 한번 정리해보면 웹 애플리케이션에서 HTML콘텐츠를 서버에서 랜더링하지 않고, 브라우저에서 JavaScript를 통해 동적으로 생성하고 랜더링하는 것을 의미하며 이를통해 사용자 인터페이스가 빠르고 반응성 있게 동작하고 UI를 업데이트 해야할 경우 전체 페이지를 새로고침하지 않고 필요한 데이터만 갱신할 수 있다. 현재 우리가 유용하게 사용하고 있는 쇼핑몰 부터 시작해서 페이스북,인스타,트위터 등 다양하게 사용되는 것 같다!

관련 글

• CSR - 클라이언트사이드 랜더링
• SSR - 서버사이드 랜더링
• MPA - 멀티 페이지 애플리케이션
• SPA - 싱글 페이지 애플리케이션