01 개요
본 문서에서는 CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 특성과 장단점에 대한 사항을 논의한다.
최종수정일 : 2023.06.20
02 전반적인 구조
(그림삽입)
위 그림에서 볼 수 있는 바와 같이, 웹 서비스는 표현(Display)와 통신(Data Communication), 연산(Compute)의 세 가지 과정으로 이루어져 있다. 과거에는 연산 과정 없이 형식에 짜놓은 시트를 통신을 통해 받아와 그대로 표현하는 정적 방식을 사용했으나, 기술발달과 사용자의 요구로 인해 연산을 통해 표현을 변경하고, 특히 로컬 머신의 성능 증가에 따라 통신을 최소화 한 SPA방식도 발달하게 되었다.
주요한 쟁점은, 연산을 클라이언트와 서버측 중 어느쪽에서 할 것인지, 통신을 어떻게 빠르고 효율적으로 할 것인지 두 측면에 대해 주요하게 다루어진다.
03 CSR(Client-Side Rendering)
CSR의 경우 클라이언트가 서버에서 HTML, CSS, JS(bundle.js)를 전송받으며, 위 파일에 내장된 서비스 구조와 렌더링 로직을 통해 DOM을 구성하며 JS는 브라우저에 내장된 엔진에서 실행된다.
03.01 특징
- 낮은 지연 : 서버로부터 받아올 추가적인 데이터가 없다면 네이티브 프로그램에 가깝게 동작한다
- 낮은 서버 부하 : 연산이 클라이언트측에서 실행되므로 서버측의 부하가 적다.
- 역할 분리 : 프론트엔드와 백엔드간의 기능 분할이 상대적으로 명확하다.
- SEO 취약 : 서비스의 많은 부분이 로컬 머신에서 실행되므로 플랫폼을 통한 접근을 위하여 데이터를 수집하는 과정인 SEO(Search Engine Optimization)에 제한점이 많다.
- 높은 클라이언트 부하 : 당연하다
03.02
04 SSR(Server-Side Rendering)
SSR의 경우 서비스 구조와 렌더링 로직을 서버측에 업로드하여, 서버측에서 연산을 처리하도록 한다.
04.01 특징
- SEO 용이 : 서비스 대부분이 외부에서 확인 가능한 영역에서 이루어지므로 검색엔진 최적화가 용이하다.
- 구현 복잡성 : 백엔드측과 클라이언트측이 밀접한 환경에서 진행되기 때문에 이해도가 높아야한다.
- 높은 서버 부하 : 당연하다
- 브라우저 객체 접근 불가 : 서버측에서 렌더링 로직이 실행되므로 브라우저 객체에 접근할 수 없다.
05 JavaScript Component Data Fetching
렌더링 로직이 어느쪽으로도 갈 수 있기 때문에, JavaScript 번들이 어디에서 실행되느냐에 따라 자바스크립트 컴포넌트가 렌더링을 위한 데이터를 받아오는 과정 또한 달라질 수 있다.
이러한 내용은 아래 링크를 참조하여 추후에 정리한다(2023.06.20)
https://tech.kakaopay.com/post/react-server-components/
