1. CSR : Client Side Rendering 의 약자.
- 렌더링이 클라이언트 쪽에서 일어난다.
- 서버는 요청을 받으면 요청에 해당하는 HTML과 JS를 보내주고 클라이언트는 이것을 받아서 렌더링을 시작한다.
- 서버에서 아무 처리 없이 클라이언트로 보내주기때문에 모든 리소스가 다운로드 되고나서 사용자가 내용을 볼 수 있다.
2. SSR : Server Side Rendering의 약자
- 서버 쪽에서 렌더링이 일어난다.
- 서버에서 이미 렌더링 가능한 상태로 전달하기 때문에 다운로드 되는 동안 사용자는 다운로드 되는 만큼 내용을 볼 수 있다.
3. CSR과 SSR의 차이
1) 로딩시간 : 첫 페이지를 로딩하는 경우는 SSR이 필요한 부분만 불러오기 때문에 SSR이 빠르지만, 다른 페이지로 이동하는 등의 동작 수행 시 CSR 방식이 첫 페이지를 로딩할때 이미 모든 내용을 받아왔기 때문에 렌더링이 빠르다.
2) SEO(Search Engine Optimization, 검색엔진 최적화) : 검색엔진은 '크롤러'로 웹페이지를 읽어 들이는데,
CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행되어 metadata가 바뀌었다.
SSR은 서버사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.
3) 서버 자원 사용
- SSR이 서버의 자원을 더 많이 사용한다. 클라이언트의 요청이 있을 때마다 서버에 접속하여 내용을 받아오기 때문이다.