CSR, SSR
CSR, SSR은 렌더링 방식 중 하나이다.
렌더링이란 브라우저 화면에 표시할 웹 페이지를 일련의 과정으로써 나타내는 동작이다.
렌더링은 간단히 위와 같은 과정으로 이루어진다.
HTML -> DOM 트리 생성 -> CSS 트리 생성 -> 렌더링 트리 생성 -> 화면 배치, 출력
CSR
Client Side Rendering의 약자로서,
직역그대로 렌더링이 클라이언트쪽에서 이뤄지는 방식이다.
서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고, 그것을 받아 렌더링을 클라이언트쪽에서 진행한다.
흔히 쓰는 Angular, React, Vue와 같은 프레임워크, 라이브러리등이 CSR방식이다.
CSR 장단점
장점
- 사용자의 UX 향상 (하이드레이션 과정 x)
- 서버 부담 down (초기 로드시 서버에 요청함으로써 요청 횟수 down)
단점
- SEO 검색엔진 최적화 down(초기 로딩시 HTML같은 정적 파일 로드 등과 같은 이유로 색인이 어려움)
- 초기 렌더링 속도 down (초기 로드시 서버 요청 후 모두 로드되면 렌더)
SSR
Sever Side Rendering의 약자로,
CSR과 달리 서버쪽에서 렌더링이 이루어진다.
서버는 요청을 받으면 화면 출력에 필요한 렌더링의 과정을 모두 완료한 후 내보낸다.
SSR 장단점
장점
- 초기 렌더링 속도 향상(렌더링을 거친 파일들을 서버로부터 반환받기 때문)
- SEO 검색엔진 최적화 up(색인에 있어 유리)
단점
- 서버 부담 up(간단한 데이터 수정시에도 서버에 매번 요청, 연속적인 렌더링 수행시 서버 과부하)
마치며
어떤 방식이 유리할까?
위의 나열된 장단점등을 통해 알 수 있듯이 SEO와 초기 렌더링 속도가 중요할 땐(예를들어 뉴스 페이지, 포탈 등) SSR
서버 부담을 줄이고자 할때 혹은 사용자와의 인터랙션이 중요할 땐 CSR 방식이 유리 하다고 볼 수 있다.
그렇다고 이분법적으로 사용치는 않고 UX, 페이지별 기능, 콘텐츠 등에 따라 수행 방식을 달리 한다.
흔히 쓰이는 프레임워크,라이브러리(Angular, React, Vue 등)이 CSR 기반으로 BFF(Backend for Frontend) 같은 방식으로 작업 된다.
*참고 문서
사용자의 관점에 대해 욕심이 많은 개발자