CSR이란?

CSR이란?

서버에서 빈 페이지를 최초로 렌더링 하고, 사용자가 요청할 때 마다 클라이언트 내 브라우저에게 렌더링 하는 것

동작 과정

초기 화면 불러오기

1. 사용자가 홈페이지를 접속하면, 클라이언트는 이를 확인하고 서버에 요청을 보낸다.
2. 서버는 빈 페이지 (HTML, CSS)를 클라이언트에게 전달합니다.
3. 전달받은 클라이언트에서 화면을 그리고, JS를 로드해 최종적인 화면을 사용자에게 보여줍니다.
4. 이후, 사용자가 다음 액션을 수행하는 경우 클라이언트 내에서 페이지를 요청하고 수행합니다.

추가적인 데이터가 필요한 경우

1. 서버로 데이터를 요청해 받아와, 클라이언트 쪽에서 JS와 함께 동적으로 화면을 구성합니다.
2. 이를 구성하는 과정에서 새로 변경된 부분만 다시 그려줍니다.

장점

• 브라우저 내에서 페이지를 이동하기 때문에, 상대적으로 페이지 간 이동속도가 빠르다
• 필요한 내용만 수정된 데이터에 대해서만 교체하므로, 속도가 빠르다
• 새로고침이 없으므로 화면 깜빡임이 발생하지 않아 사용자에게 친화적이다.
• 사용자에게 보여지는 시점(TTV)과 사용자에게 서비스하는 시점(TTI)의 차이가 없다

단점

• 빈 페이지를 출력하고 스크립트 링크에 따라서 다운을 받아오기 떄문에, SSR과 상태적으로 사용자에게 보여지는 초기 페이지 렌더링 속도가 느리다.
• 초기 페이지가 빈 페이지기 때문에 SEO에 불리하다.