[TIL] CSR, SSR이란?

CSR

Client Side Rendering의 약자

• 렌더링이 클라이언트쪽에서 일어난다.
• 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보낸다.
• 클라이언트는 그것을 받아 렌더링을 시작한다.
• 서버에서 처리 없이 클라이언트로 보내기 때문에 자바스크립트가 모두 다운로드 되고, 실행이 끝나기 전까지 사용자는 볼 수 있는게 없음
• React가 해당 됨

---

SSR

Server Side Rendering의 약자

• 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식
• 서버에서 이미 렌더 가능한 상태로 클라이언트에 전달되기 때문에, 자바스크립트가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있음
• Thymeleaf가 해당 됨

---

 

CSR, SSR의 차이는?

웹페이지를 로딩하는 시간

• CSR의 경우 HTML, CS와 모든 스크립트들을 한 번에 불러온다.
• SSR은 필요한 부분의 HTML과 스크립트만 불러온다. 따라서 평균적으로 SSR이 더 빠르다.

나머지 로딩 시간

• 첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정한다.
• CSR은 이미 첫 페이지를 로딩할 때 나머지 부분을 구성하는 코드를 받아왔으므로 빠르다.
• SSR은 첫 페이지 로딩한 과정을 정확하게 다시 실행하므로 더 느리다.

SEO 대응

• CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 자바스크립트가 실행되어야 metadata가 바뀜
• SSR은 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이함

서버 자원 사용

• CSR은 클라이언트에서 작업이 많이 일어나기 때문에 서버 부하가 적다.
• SSR은 매번 서버에 요청을 하기 때문에 서버 자원을 더 많이 사용한다.

---

출처

1. https://hahahoho5915.tistory.com/52