서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점은 무엇인가요?

1. SSR(Server Side Rendering)

 

웹 애플리케이션에서 페이지를 렌더링하는 방식 중 하나로,

서버에서 HTML을 생성하여 브라우저로 전송하는 방식이다.

사용자가 요청을 보내면 서버가 데이터를 처리하고 완전한 HTML을 반환한다.

브라우저는 이를 받아 바로 화면에 표시한다.

 

1 - 1. SSR의 장단점

 

1 - 1 - 1. SSR의 장점

 

1. 빠른 초기 로딩: 서버에서 HTML을 제공하기 때문에 첫 화면 로딩 속도가 빠르다.
2. SEO 최적화: 검색 엔진 크롤러가 완전한 HTML 콘텐츠를 쉽게 읽고 인덱싱할 수 있어 SEO에 유리하다.
3. 모든 디바이스에서 일관된 성능: 클라이언트의 성능에 크게 의존하지 않는다.

 

1 - 1 - 2. SSR의 단점

 

1. 서버 부하 증가: 모든 요청에 대해 서버가 페이지를 렌더링해야 하므로 서버 부담이 커질 수 있다.
2. 페이지 전환 시 느림: 새로운 페이지 요청마다 서버와 통신해야 하므로 페이지 전환 속도가 느릴 수 있다.
3. 복잡한 설정: 서버와 클라이언트 환경 모두를 구성해야 하므로 개발 및 유지보수가 복잡할 수 있다.

 

2. CSR(Client Side Rendering)

 

브라우저(클라이언트)가 JavaScript를 사용해 동적으로 HTML을 생성하는 방식이다.

서버는 기본적인 HTML과 JavaScript 파일만 전송하며, 브라우저가 이를 실행하여 화면을 구성한다.

 

2 - 1. CSR의 장단점

 

2 - 1 - 1. CSR의 장점

 

1. 빠른 페이지 전환: 초기 로딩 이후에는 필요한 데이터만 요청하므로 페이지 전환이 빠르고 부드럽다.
2. 서버 부하 감소: 렌더링 작업이 클라이언트에서 이루어지기 때문에 서버 부담이 적다.
3. 풍부한 상호작용: 동적인 사용자 인터페이스를 구현하기에 적합하다.

 

2 - 1 - 2. CSR의 단점

 

1. 느린 초기 로딩: 브라우저가 JavaScript 파일을 다운로드하고 실행해야 하므로 초기 로딩 시간이 길어질 수 있다.
2. SEO 문제: 초기 HTML이 비어있어 검색 엔진 크롤러가 콘텐츠를 제대로 인덱싱하지 못 할 수 있다.
3. 클라이언트 성능 의존: 성능이 낮은 디바이스에서는 사용자 경험이 저하될 수 있다.

 

3. 정리

 

SSR과 CSR은 각각의 장단점이 뚜렷하며, 프로젝트의 요구 사항에 따라 적절히 선택해야 한다.

 

References

https://www.maeil-mail.kr/question/103

https://blog.the-compass.kr/csr-ssr-spa-mpa-ede7b55c5f6f