<aside> 💡 표시해줄 화면을 어디서, 어떻게 그리냐의 차이

</aside>

• CSR은 페이지의 내용을 브라우저에서 그리고
• SSR은 서버에서 페이지의 내용을 다 그려서 브라우저로 던져준다.

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

• CSR은 SPA 트렌드와 CPU 성능 상승 + JS 표준화 (리액트, 뷰, 앵귤로 등의 프레임워크 발전)와 함께 본격적으로 시작되었다.
• CSR은 쉽게 말해서 클라이언트에서 모두 처리한다.
• 서버에서 전체 페이지를 한번 렌더링 하여서 보여주고, 사용자가 요청할때마다 리소스를 서버에서 제공받아서 클라이언트가 해석하고 렌더링 하는 방식.

<aside> 💡 서버에 HTML 문서를 요청하는게 아니라, 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는것

</aside>

• SPA를 구현해보았듯이, 자바스크립트의 innerHTML이나 innerText 처럼 돔을 이용해 HTML을 그려준다.
• SPA는 최초 한 번 페이지 전체를 로딩한 뒤, 데이터만 변경하여 사용 할 수 있는 애플리케이션.

2. 클라이언트 사이드 렌더링 과정

• HTML이 텅텅 비어있기 때문에 처음에 접속하면 빈 화면만 보이게 되고, 링크된 자바스크립트를 다운로드 받게 된다.
• 자바스크립트 파일에는 필요한 로직, 구동하기 위한 프레임워크, 라이브러리의 소스코드들도 모두 포함되어 있다.

<aside> 💡 그렇기 때문에 처음 다운로드 받을 때 꽤나 시간이 소요될 수 있다.

</aside>

• 추가적으로 데이터가 필요하면 서버로부터 데이터를 받아와서 클라이언트 쪽에서 자바스크립트와 함께 동적으로 화면을 구성하여 사용자에게 최종적 화면을 보여주게 된다.

단점 : 사용자가 첫 화면을 보기까지의 시간이 오래 걸릴 수 있다는 점과 썩 좋지 않은 SEO를 꼽을 수 있다.