WEB | CSR vs SSR

렌더링 방식을 설명하는 두 가지 서로 다른 개념

CSR (Client-Side Rendering)

웹 애플리케이션 렌더링을 클라이언트(브라우저) 측에서 처리하는 방식

서버는 주로 데이터와 기본적인 HTML 구조만을 제공하고, 브라우저가 JavaScript를 사용하여 콘텐츠를 동적으로 생성하고 렌더링함

이 방식은 주로 SPA와 함께 사용되며 React, Vue.js, Angular와 같은 프레임워크에서 널리 활용 됨

 

장점

• 빠른 사용자 인터렉션 : 초기 로딩 후에는 서버 요청 없이 페이지 전환과 업데이트가 즉시 이루어져, 빠른 반응성을 제공함
• 유연한 프론트엔드 개발 : 프론트엔드와 백엔드의 역활이 명확히 분리되어, 독립적인 개발과 테스트가 가능함
• 부드러운 사용자 경험 : 페이지 전환 시 부드러운 애니메이션과 동적 콘텐츠 업데이트를 쉽게 구현할 수 있음

 

단점

• 초기 로딩 시간 증가 : 애플리캐이션이 처음 로드될 때 필요한 JavaScript 파일이 커질 수 있어 초기 로딩 시간이 길어질 수 있음
• SEO 문제 : 클라이언트에서 콘텐츠가 렌더링되기 때문에 검색 엔진 크롤러가 페이지를 제대로 인덱싱하지 못할 수 있음
• 성능 이슈 : 클라이언트의 성능에 따라 렌더링 속도와 애플리케이션의 전반적인 성능이 영향을 받을 수 있음

 

차이점

• 클라이언트 측에서 렌더링이 이루어져, 초기 로딩 후에는 빠른 사용자 경험을 제공하지만 초기 로딩 시간이 길어지고 SEO에 불리할 수 있음
• 주로 사용자 상호작용이 많은 애플리케이션에 적합

 

---

SSR (Server-Side Rendering)

웹 애플리케이션의 렌더링을 서버 측에서 처리하는 방식

서버가 완전한 HTML 페이지를 생성하여 브라우저에 전달하며, 클라이언트는 즉시 렌더링된 페이지를 받아 사용자에게 보여줌

이는 전통적인 MPA방식과 유사하지만, 현대적인 프레임워크에서도 SSR을 지원함

 

장점

• 빠른 초기 로딩 : 서버에서 렌더링된 페이지를 즉시 전달하므로, 초기 로딩 시간이 짧고 빠르게 콘텐츠를 볼 수 있음
• SEO 친화적 : 서버에서 완전한 HTML 페이지를 제공하기 때문에 검색 엔진이 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있음
• 클라이언트 자원 절약 : 대부분의 렌더링 작업이 서버에서 처리되므로 클라이언트의 자원 소비를 줄일 수 있음

 

단점

• 서버 부하 증가 : 모든 렌더링 작업이 서버에서 이루어지기 때문에, 서버 부하가 커지고 스케일링이 어려울 수 있음
• 느린 페이지 전환 : 새 페이지를 요청할 때마다 서버에서 다시 렌더링하므로, 페이지 전환 속도가 느려질 수 있음
• 복잡한 설정 : 프레임워크와 서버의 설정이 복잡하며, 클라이언트와 서버 간의 동기화 문제를 해결해야 함

 

차이점 

• 서버에서 렌더링하여 초기 로딩이 빠르고 SEO에 유리하지만, 페이지 전환 시 느려질 수 있으며 서버 부하가 증가할 수 있음
• SEO가 중요 콘텐츠 중심의 웹사이트에 적합함