CSR, SSR

@t189216·2024년 2월 13일
0

💻 CS

목록 보기
4/36

먼저 렌더링이란


웹문서에는 브라우저에 표시되어야 할 정보들을 담고 있습니다. 이 정보들은 브라우저가 해석할 수 있는 프로그래밍 언어로 되어 있으며, 서비스를 제공하는 회사 혹은 개인의 서버(클라우드 서버 등)에 저장되어 있습니다.

사용자(Client)는 URL을 통해 그 정보를 요청하게 되고, 그 요청을 받은 서버는 웹문서를 사용자 브라우저에 전달해주게 됩니다. 그리고 브라우저가 사용자가 보기 편하게 예쁘게 표시하는 과정을 렌더링(Rendering) 이라고 합니다.

CSR ?


CSR 은 Client Side Rendering의 줄임말입니다. 요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 생성하여 반환합니다. 클라이언트에서 렌더링한다고 하여 CSR 이라고 합니다.

구동 방식은 초기 로드 시 빈 HTML과 모든 로직이 담겨 있는 Javascript 다운로드를 합니다.

보통 로드가 될 때 ‘Loading’임을 표시해주는 화면을 먼저 표시하고, 일단 로드가 되고 나면 사이트 내에서 돌아다닐 때 로드되는 과정이 없어지므로 사용성이 좋아집니다.

링크 이동을 할 때 자바스크립트를 이용해 동적으로 화면을 바꿔줘야 하므로 index.html 문서가 가지고 있는 정보가 적어 검색엔진들이 웹사이트를 분석해서 내용들을 파악하고 검색 시에 뿌려주어야 할 경우 제대로 걸러내지 못 하게 됩니다.

SSR ?


Sever Side Rendering의 줄임말로 서버에서 렌더링하여 완성된 HTML 파일을 로드하는 것입니다.

인덱스 페이지에 표시되어야 할 html 파일을 먼저 브라우저가 다운받고, 이어 javascript 파일을 다운 받는 동안에 html 파일의 렌더링을 시작합니다.

웹 페이지 초기 로딩 지연시간을 줄일 수 있지만 컴퓨터의 속도가 느리다면 처음에 javascript가 다 다운이 받아지지 않아서 기능이 동작하지 않을 수도 있습니다. 렌더링이 빠른 장점이 있지만 페이지를 이동할 때마다 화면 깜박임(화면이 로드될 때마다 화면이 백지로 변하고 다시 화면이 출력되는 현상)이 있습니다.

참고 블로그
참고 블로그

profile
Today I Learned

0개의 댓글