1. 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)이란?
클라이언트 사이드 렌더링은 웹 애플리케이션에서 사용자 인터페이스(UI)를 브라우저에서 동적으로 생성하는 방식이다. 초기 로드 시 최소한의 HTML과 자바스크립트 파일을 받아오고, 이후 필요한 데이터와 화면 구성은 브라우저에서 자바스크립트를 통해 처리된다.
2. 장점
- 전체 페이지를 다시 로드하지 않고도 동적인 콘텐츠 업데이트와 부드러운 페이지 전환이 가능하다.
- 복잡한 애니메이션, 실시간 데이터 처리 등 고급 UI/UX를 구현할 수 있다.
- 뷰 렌더링을 클라이언트에서 처리하므로 서버의 처리 부담이 줄어든다.
- React, Angular, Vue.js 등 프론트엔드 프레임워크의 활용으로 컴포넌트 기반 개발과 코드 재사용이 용이하다.
-> 그럼 옛날에는 어떻게 했지?
4. 과거의 방식: 서버 사이드 렌더링(Server-Side Rendering, SSR)
동작 방식
- 클라이언트가 요청을 보내면, 서버가 완전한 HTML 페이지를 생성하여 응답한다.
- 모든 뷰 렌더링 로직이 서버에서 처리되며, 클라이언트는 단순히 HTML을 받아 표시한다.
사용된 기술
- JSP/Servlet: Java 기반의 웹 기술로, 서버에서 동적으로 HTML을 생성했다.
- PHP, ASP.NET: 서버 사이드 스크립팅 언어로, 요청에 따라 HTML을 동적으로 생성했다.
5. 클라이언트 사이드 렌더링의 등장으로 인한 개선점
1) 사용자 경험 향상
- 싱글 페이지 애플리케이션(SPA): 페이지 전체를 다시 로드하지 않고도 부분적인 업데이트가 가능해져 더 빠르고 부드러운 사용자 경험을 제공한다.
- 사용자 입력에 대한 즉각적인 반응과 동적인 콘텐츠 업데이트가 가능해졌다.
2) 개발 효율성 증가
- UI를 작은 단위로 분리하여 재사용성과 유지보수성을 증가했다.
- 프론트엔드와 백엔드의 역할과 책임이 명확해져 협업과 개발 프로세스가 개선되었다.
3) 서버 자원 최적화
- 서버는 주로 API 제공에 집중하므로, 트래픽 증가에 대한 대응이 수월하다.