개요

클라이언트사이드렌더링(CSR)과 서버사이드렌더링(SSR)의 정의에 대해서 알아보고 둘의 차이점을 정리하는 글이다.

💻 CSR (클라이언트 사이드 렌더링)이란?

서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 되는 것

• Angular와 React가 이러한 유형의 렌더링에 사용되는 라이브러리
• 초기 업로드 시간은 다소 느리지만 경로마다 다른 HTML 페이지에 의존하지 않기때문에 후속 페이지 로딩 속도가 빠르다.

❓ CSR의 작동방식은?

1. 사용자가 페이지를 요청
2. 서버는 필요한 Javascript 파일과 함께 초기 HTML 파일 전송
3. 클라이언트는 전체 페이지를 다시 로드할 필요 없이 자바스크립트를 사용해 필요에 따라 페이지를 업데이트
4. 이제 사용자는 페이지를 보고 상호작용할 수 있게된다

💣 CSR의 단점

1. 초기페이지 렌더링 시 느리다
최초 렌더링 시 HTML/CSS, JavasScript를 먼저 렌더링 한 다음 사용자에게 표시되므로, 초기페이지를 로드하는데 걸리는 시간이 길어질 수 있다

2. 검색엔진 최적화 (SEO) 이슈
일반적으로 검색 엔진 크롤러는 HTML문서를 파싱해 콘텐츠를 인식하고 인덱싱하게 되는데, 클라이언트 사이드 렌더링된 페이지는 초기 HTML에는 컨텐츠가 없고, Javascript로 동적으로 생성되기때문에 검색엔진 크롤러가 웹 페이지의 내용을 정확하게 파악하기 어려워진다

🧙 SSR (서버 사이드 렌더링)이란?

클라이언트가 아닌 서버가 웹 페이지의 HTML을 생성하여 브라우저에 표시되도록 클라이언트 측으로 전송하는 것

• HTML이 서버 측에서 미리 렌더링 되므로 로딩 속도가 빨라지고, SEO가 최적화 된다.
• 즉, SSR을 사용하면 서버가 완전히 렌더링 된 HTML을 클라이언트로 전송 ➡️ 클라이언트는 자바스크립트 실행을 기다리지않고 브라우저에 페이지를 표시한다
• 이에 대해서 Next.js가 초기페이지 로딩 시 CSR의 단점을 보완해 SSR 기능을 지원해준다. 이에 대해 부분적으로 서버사이드렌더링과 클라이언트사이드렌더링을 복합적으로 적절히 선택해 사용할 수 있게 한다.

❓ SSR의 작동방식은?

1. 사용자가 브라우저를 통해 웹 페이지를 요청
2. 브라우저는 해당 페이지에 대해 미리 렌더링 된 HTML 및 CSS가 이미 있는 서버에 연결
3. 브라우저는 서버에서 쉽게 사용할 수 있는 페이지의 JavaScript를 다운로드
4. 이제 사용자는 페이지를 보고 상호작용 할 수 있게 된다.

😭 SSR의 단점

1. 비용증가
서버사이드렌더링 애플리케이션 배포시 서버에 대한 비용을 지불해야하므로 운영비용이 높아질 수 있다.
서버사이드 렌더링은 Javascript 웹 사이트의 기본값이 아니기때문에 비용과 리소스를 많이 잡아먹을 수 있으며, 사용자를 위한 콘텐츠 렌더링의 모든 부담을 서버가 가져야한다.

2. 사용자와 상호작용
javaScript를 전부 다운로드 하기 전까지 웹 애플리케이션은 즉시 사용자와 상호작용할 수 없다.