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

서버 사이드 렌더링(SSR)은 서버 측에서 렌더링 하는 방식입니다. 클라이언트가 서버에 콘텐츠를 요청하면 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고 CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JS 코드를 응답합니다. 브라우저에서는 JS 코드를 다운로드하고, HTML에 JS를 연결합니다.

모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 검색 엔진 최적화(SEO)에 유리하며, 초기 로딩 속도가 빠르다는 장점이 있습니다.

하지만 페이지 간 이동 시마다 서버 요청이 발생하여 사용자 경험이 저하되고, 서버에 큰 부담이 생길 수 있다는 단점이 있습니다.

 

클라이언트 사이드 렌더링(CSR)은 클라이언트 측에서 렌더링 하는 방식입니다. 클라이언트가 서버에 콘텐츠를 요청하면 서버는 빈 뼈대만 있는 HTML을 응답합니다. 클라이언트는 연결된 JS 링크를 통해 서버로부터 다시 JS 파일을 다운로드 받은 뒤, JS를 통해 동적으로 페이지를 만들어 브라우저에 보여줍니다.

빈 뼈대만 있는 HTML을 받아오기 때문에 웹 크롤러 봇 입장에서 색인할만한 콘텐츠가 존재하지 않아 검색 엔진 최적화(SEO)에 불리하며, 초기 구동 속도가 느리다는 단점이 있습니다.

하지만 초기 로딩 이후 페이지 일부를 변경할 때는 서버에 해당 데이터만 요청하면 되기 때문에 이후 구동 속도가 빠릅니다. 또한 서버의 부담이 적어지고, 좋은 사용자 경험을 제공할 수 있다는 장점이 있습니다.

 

이커머스 사이트처럼 빠른 초기 로딩과 SEO가 중요한 경우 SSR을 선택할 수 있고,

SNS처럼 사용자가 빈번하게 상호작용하며 실시간 업데이트가 중요한 애플리케이션에서 CSR을 선택할 수 있습니다.