CSR과 SSR 그리고 SPA까지

CSR은 무엇일까

CSR(Client-side rendering)은 말 그대로 웹 브라우저에서 페이지를 동적으로 렌더링하는 방식으로, 웹 애플리케이션에서 사용되는 렌더링 방식 중 하나다.

 

CSR은 초기에 서버에서 전달되는 HTML 페이지가 비어있거나 최소한의 내용만을 포함하여, JavaScript와 같은 클라이언트 측 스크립트를 사용하여 페이지를 동적으로 생성하고 렌더링한다.

장점

1. 더 나은 사용자 경험을 가져올 수 있다.
   초기 페이지 로딩 후 필요한 데이터만 비동기적으로 가져와 동적으로 페이지를 업데이트한다.
   이로써 사용자는 빠른 페이지 전환과 부드러운 상호작용을 경험할 수 있다.
2. 페이지간 이동 시 빠른 로딩 속도
   추후 서술할 SCR 보다 비교적 빠른 초기 로딩 속도를 선보인다.
3. 서버 부하 절감
   페이지를 구성할 때 필요한 데이터만 요청하므로 서버 부하를 절감할 수 있다.

단점

1. SEO
   일부 검색 엔진은 HTML 페이지에 포함된 내용을 크롤링한다.
   그러므로 CSR의 내용을 제대로 수집&인덱싱하기 어려울 수 있다.
2. 초기 페이지 로딩 속도
   초기 페이지 로딩 시 모든 HTML과 JavaScript를 다운로드 하기에 로딩시간이 오래 걸릴 수 있다.
3. 보안 문제
   클라이언트 측에서 로직을 실행하므로, 보안 측면에서 취약할 수 있다.
   악의적인 사용자가 클라이언트 코드를 조작하거나 노출할 수 있으므로, 보안에 대한 신경을 써야한다.
4. 호환성
   일부 오래된 브라우저에서는 최신 JavaScript 기능을 지원하지 않을 수 있으므로, 호환성 문제가 발생할 수 있다.
   또한 저사양 장치에서는 원활한 동작을 보장할 수 없다.

SPA에서 SSR이 필요한 이유

SPA는 CSR 방식을 사용하여 구축된 웹 애플리케이션이다.

그렇기 때문에 위에서 나열한 CSR의 단점을 고스란히 안게 된다.

SSR

SSR(Server-side rendering)은 CSR과 반대로 서버에서 렌더링하여 클라이언트에서 전달하는 방식으로써,

다음과 같은 점들을 보완할 수 있다.

1. SEO
   처음부터 모두 렌더링된 페이지를 제공하므로 검색 엔진이 쉽게 수집 & 인덱싱 할 수 있다.
2. 초기 로딩 속도 개선
   서버에서 렌더링하여 완전한 형태로 전달하므로 초기 로딩 속도를 개선할 수 있다.

글을 마치며...

물론, CSR만 쓴다거나, SSR만 쓰라는 것이 아니다.

둘의 장단점이 명확하기 때문에 프로젝트의 요구사항과 목표에 맞게 적절히 혼합하여 쓰면 좋을 것 같다.