2강 - 클라이언트 사이드 렌더링과 서버 사이드 렌더링

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

클라이언트 사이드 렌더링은, 서버에서 브라우저로 전달되는 HTML 파일에는 최소한의 내용만 포함되고, 대부분의 UI 생성 및 렌더링 작업이 브라우저 측에서 이루어지는 방식입니다. 즉, 브라우저에서 JavaScript를 이용해 동적으로 페이지를 생성하고 렌더링하는 방식입니다.
CSR 방식은 사용자가 앱을 처음 열었을 때 서버에서 HTML, CSS, JS와 같은 정적 파일만 전송되고, 이후에는 서버에서 데이터만 전달받아 필요한 화면을 동적으로 렌더링합니다. 이는 서버 부하를 줄일 수 있고, 브라우저에서 앱을 실행하는 것이기 때문에 웹 애플리케이션의 성능 향상에 큰 기여를 합니다.
하지만 CSR 방식은 초기 로딩 속도가 느리다는 단점이 있습니다. 최초 로딩 시에는 JavaScript 파일 등 모든 자원을 다운로드해야 하기 때문입니다. 또한, CSR 방식은 검색 엔진 최적화(SEO)에 취약합니다. 이는 CSR 방식으로 구현된 웹 페이지의 경우, 검색 엔진이 웹 페이지의 내용을 인덱싱하기 전에 JavaScript 파일을 실행시켜서 뷰를 생성해야 하기 때문입니다.

서버 사이드 렌더링은, 서버에서 UI를 생성하고 완전한 HTML을 클라이언트로 보내주는 방식입니다. 서버에서는 JavaScript, CSS 등 모든 자원을 포함한 완전한 HTML을 생성하고, 클라이언트(브라우저)는 그대로 받아서 보여주기만 하면 됩니다.
SSR 방식은 최초 로딩 시에 빠른 로딩 속도를 보여준다는 장점이 있습니다. 서버에서 모든 UI를 생성하기 때문에, 클라이언트에서 필요한 자원만 전달받아서 UI를 렌더링할 수 있습니다.