Q. 클라이언트 사이드 렌더링(CSR) 서버 사이드 렌더링(SSR)의 개념, 장단점

❓클라이언트 사이드 렌더링(CSR)

개념
- 이 방식에서는 서버는 초기 페이지 로딩 시에 빈 페이지나 매우 기본적인 틀만 전송하며, 필요한 데이터나 나머지 페이지 내용은 클라이언트(브라우저)에서 JavaScript를 사용해 렌더링함

장점
- 동적 상호작용: CSR 방식은 사용자와의 상호작용에 반응적인 웹 애플리케이션을 만들기 좋음
- 서버 부하 감소: 서버는 렌더링에 관한 작업을 클라이언트에게 위임하기 때문에 부하가 줄어듬
- SPA(Single Page Application)에서 효과적임

단점
- 초기 로딩 시간: 전체 애플리케이션 코드와 데이터를 로드해야 하기 때문에 초기 로딩 시간이 길어질 수 있음
- SEO 문제: 크롤러가 JavaScript로 렌더링되는 페이지를 올바르게 인식하지 못할 경우, SEO 최적화에 문제가 발생할 
- 브라우저의 JavaScript 비활성화: 일부 사용자가 JavaScript를 비활성화한 경우 페이지가 제대로 동작하지 않을 수 있음

❓서버 사이드 렌더링(SSR)

개념
- 웹 페이지의 내용은 서버에서 렌더링된 후 완성된 형태의 HTML을 클라이언트에게 전송
- 클라이언트는 이 HTML을 받아서 브라우저에 표시함

장점
- 초기 로딩 속도: 사용자는 빠르게 완성된 페이지를 볼 수 있기 때문에 사용자 경험을 향상시킴
- SEO 최적화: 검색 엔진 크롤러가 완성된 HTML 내용을 쉽게 인식하므로 SEO에 유리함
- JavaScript 비활성화 문제 없음: 브라우저에서 JavaScript가 비활성화되어 있더라도 페이지의 기본 내용을 볼 수 있음

단점
- 서버 부하 증가: 각 페이지 요청마다 서버에서 렌더링을 수행해야 하므로 부하가 증가
- 구현 복잡성: 서버오 클라이언트 사이의 상태 동기화 등의 복잡한 문제가 발생할 수 있음

최근에는 CSR과 SSR의 장점을 결합한 하이브리드 방식이나, Next.js나 Nuxt.js와 같은 프레임워크를 사용하여 SSR과 정적 사이트 생성(Static Site Generation, SSG)을 쉽게 구현할 수 있음

 

 

클라이언트 사이드 렌더링(CSR)은 웹 페이지의 내용이 브라우저에서 직접 JavaScript를 실행하여 생성되는 방식을 의미합니다. 즉, 사용자는 초기에는 비어있는 구조나 로딩 화면만 보게 될 수 있고, 그 후 자바스크립트가 데이터를 가져와 페이지를 동적으로 채워나갑니다. CSR의 장점으로는 한 번 로딩 후 매끄러운 사용자 경험과 동적인 상호작용이 가능하다는 것과, 초기 로딩 이후에는 대부분 데이터만 가져오기 때문에 서버 부하가 줄어든다는 점이 있습니다. 그러나 단점으로는 초기 로딩 속도가 느려질 수 있으며, 웹 크롤러가 JavaScript를 제대로 실행하지 않을 경우 SEO 문제가 발생할 수 있습니다.
반면, 서버 사이드 렌더링(SSR)은 서버에서 페이지의 내용을 렌더링하고, 그 결과인 완성된 HTML 페이지를 클라이언트에 전송하는 방식입니다. 사용자는 빠르게 완성된 페이지를 볼 수 있게 됩니다. SSR의 장점으로는 사용자가 초기에 빠르게 페이지를 볼 수 있고, 웹 크롤러가 콘텐츠를 쉽게 파악해 SEO에 유리하다는 점이 있습니다. 그러나 단점으로는 각 사용자 요청마다 서버에서 렌더링을 해야 하므로 서버 부하가 증가할 수 있으며, 페이지의 동적인 상호작용을 시작하기 전에 필요한 자바스크립트 파일이 모두 로드되어야 한다는 점입니다.
최근에는 이 두 방식의 장점을 결합한 하이브리드 방식도 많이 사용되고 있습니다.