CSR
Client Side Rendering의 약자
- 렌더링이 클라이언트에서 일어남
- 서버에서 클라이언트에게 HTML와 JS를 보내주고 클라이언트는 그것을 받아 렌더링함
- 페이지 이동 자연스럽고 빠름
서버에서 처리없이 클라이언트로 보내줘서 클라이언트의 렌더링이 끝나기 전 까지 사용자는 볼 수 없음
SSR
Server Side Rendering의 약자
- 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
- 서버에서 이미 렌더 가능한 상태로 클라이언트에 전달되기 때문에, JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다.
CSR과 SSR의 차이
- 웹 페이지의 로딩 시간
- 첫 페이지의 로딩시간은 CSR방식이 더 느리며 이후의 페이지 로딩 시간은 SSR방식이 더 느리다.
- 검색엔진최적화(SEO)
- CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행 되어야 meatadata가 바뀌었다. 이는 속도가 엄청느려지고 SEO 최적화가 필수였지만 SSR은 서버에서 크롤링이 되기 때문에 SEO 대응에 용이하다.
- 서버 자원 사용
- SSR이 서버 자원을 더 많이 사용한다. 매번 서버에 요청을 하기 때문이다.
이번엔