웹문서에는 브라우저에 표시되어야 할 정보들을 담고 있습니다. 이 정보들은 브라우저가 해석할 수 있는 프로그래밍 언어로 되어 있으며, 서비스를 제공하는 회사 혹은 개인의 서버(클라우드 서버 등)에 저장되어 있습니다.
사용자(Client)는 URL을 통해 그 정보를 요청하게 되고, 그 요청을 받은 서버는 웹문서를 사용자 브라우저에 전달해주게 됩니다. 그리고 브라우저가 사용자가 보기 편하게 예쁘게 표시하는 과정을 렌더링(Rendering)
이라고 합니다.
CSR
은 Client Side Rendering의 줄임말입니다. 요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 생성하여 반환합니다. 클라이언트에서 렌더링한다고 하여 CSR
이라고 합니다.
구동 방식은 초기 로드 시 빈 HTML과 모든 로직이 담겨 있는 Javascript 다운로드를 합니다.
보통 로드가 될 때 ‘Loading’임을 표시해주는 화면을 먼저 표시하고, 일단 로드가 되고 나면 사이트 내에서 돌아다닐 때 로드되는 과정이 없어지므로 사용성이 좋아집니다.
링크 이동을 할 때 자바스크립트를 이용해 동적으로 화면을 바꿔줘야 하므로 index.html 문서가 가지고 있는 정보가 적어 검색엔진들이 웹사이트를 분석해서 내용들을 파악하고 검색 시에 뿌려주어야 할 경우 제대로 걸러내지 못 하게 됩니다.
Sever Side Rendering의 줄임말로 서버에서 렌더링하여 완성된 HTML 파일을 로드하는 것입니다.
인덱스 페이지에 표시되어야 할 html 파일을 먼저 브라우저가 다운받고, 이어 javascript 파일을 다운 받는 동안에 html 파일의 렌더링을 시작합니다.
웹 페이지 초기 로딩 지연시간을 줄일 수 있지만 컴퓨터의 속도가 느리다면 처음에 javascript가 다 다운이 받아지지 않아서 기능이 동작하지 않을 수도 있습니다. 렌더링이 빠른 장점이 있지만 페이지를 이동할 때마다 화면 깜박임(화면이 로드될 때마다 화면이 백지로 변하고 다시 화면이 출력되는 현상)이 있습니다.