내 서비스의 클론 코딩을 통해 프론트엔드 렌더링 방식 이해하기
- CSR : 서버로부터 HTML 문서와 번들을 로드하여 클라이언트에서 렌더링을 진행합니다.
- ISR : ISR는 페이지 요청과는 무관하게 캐시 주기에 따라 미리 렌더링하여 정적인 문서로 만들어 저장합니다.
쉽게 떡볶이에 비유하자면 CSR의 경우 주문을 하면 고객의 자리에서 조리를 하는 즉석떡볶이 방식이고, ISR은 포장마차에서 판매하는 떡볶이처럼 미리 만들어 놓고 적정 주기에 따라 다시 만드는 방식입니다. SSR은 주문시에 주방에서 조리되어 나오는 김밥천국 떡볶이가 될 수 있겠네요
초기로딩속도 측면에서의 비교
CSR의 경우 고객 주문시에 냄비(html)과 떡볶이 재료 및 조리기구(번들)을 주방(서버)에서 가져오는데 시간이 걸려요. 더불어 떡볶이를 조리(렌더링)하는데에도 시간이 걸립니다. 반면 ISR의 경우 이미 만들어져있는(빌드된) 떡볶이이기 때문에 CSR에 비해 속도가 매우 빠릅니다. 그래서 이미 빌드되어 별도의 렌더링 과정을 거치지 않는 ISR방식이 초기 로딩 속도 측면에서 UX가 더 월등하다고 볼 수 있습니다.
사용자와 상호작용 측면에서의 비교
CSR은 (waterfall 방식의 경우)부모 컴포넌트의 상태가 변하면 자식 컴포넌트도 렌더링이 발생하지만 서버 컴포넌트는 이러한 문제점을 보완할 수 있습니다. 그리고 사용자와 상호작용 과정에서도 서버 컴포넌트를 통해 불필요한 렌더링을 줄일 수 있어 더 나은 UX를 제공할 수 있습니다.
LightHouse 성능 측정 결과를 비교하면 다음과 같습니다. 왼쪽 사진이 CSR, 오른쪽 사진이 ISR방식입니다.
이미 셀럽잇 서비스의 성능을 개선시켜서 100점이지만 세부지표를 비교해보면 전체적으로 더 향상된 것을 확인할 수 있습니다.