CSR

CSR(Client Side Rendering) 클라이언트 사이드 렌더링이라는 뜻으로, 구동 방식은 초기 로드 시 빈 HTML과 JS를 다운로드 한다. 이후 빈 HTML에 JS를 이용해 DOM을 동적으로 생성하여 그려낸다. (=하이드레이션) SPA에 적합한 환경이다.

CSR 장점

• JS를 이용해 동적으로 DOM을 그려내기에 원하는 내용만 업데이트 (재렌더링)할 수 있다.
  -- ex) 링크 이동을 클릭 시 헤더, 푸터 같이 중복되는 내용은 고정으로 두고 안의 콘텐츠 부분만 업데이트&로드 할 수 있다.

CSR 단점

• HTML파일을 하나만 받아와서 작동하다 보니 각각 페이지에 대한 정보를 담기 힘들어 SEO에 취약하다.
• 첫 로드 시 모든 로직이 담긴 JS를 다운로드 하기에 첫 진입 시 로딩 속도가 길다.

---

SSR

SSR(Server Side Rendering) 서버 사이드 렌더링이라는 뜻으로, 구동 방식은 서버에서 렌더링하여 완성된 HTML 파일을 로드해준다.
클라이언트에서 요청할 때마다 각 상황에 맞는 HTML 파일을 넘겨주기에 페이지가 여러 가지일 수밖에 없다. MPA 구동 방식과 밀접한 관계가 있다.

SSR 장점

• CSR보다 초기 진입 시 로딩이 빠르다
• 서버에서 렌더링 후 개별 페이지를 넘겨받으므로 각 페이지에 대한 정보를 입력하기 쉽고, 따라서 SEO를 향상할 수 있다.

SSR 단점

• 링크 이동 클릭 시 새 HTML 파일 자체를 서버에서 받아오기에 화면 깜빡임 현상이 있다.
• 부분 업데이트하는 CSR과 달리 헤더, 푸터처럼 중복되는 부분도 다시 렌더링해 받는다.
• 페이지 이동이 CSR보다 느리다.
• 다운로드가 늦어질 경우, HTML로 화면은 확인되지만 JS 다운로드 전엔 기능이 동작하지 않는 경우가 있다.

---

CSR + SSR

• React + Gatsby
• React + Next.js
• Angular + Universal

등의 방법으로 두 가지 방법으 혼용해 사용할 수 있다. 이 중 React + Next.js를 이용해서 SEO를 고려한 작업으로 회사 프로젝트를 진행해 본 경험이 있다.

참고

CSR과 SSR의 차이점
서버 사이드 렌더링이란?
헷갈렸던 Next.js 동작 원리