CSR/SSR

• CSR = Cilent Side Rendering

렌더링이 클라이언트 쪽에서 일어남

서버에서 클라이언트로 HTML과 JavaScript 보내줌 -> 클라이언트가 받아서 렌더링

HTML 결과를 자바 스크립트를 사용해 웹 브라우저에서 동적으로 생성

서버에서 처리하지 않고 클라이언트로 보내주기 때문에

자바스크립트 다운이 완료될때까지 사용자는 볼 수 있는게 없음 

---

• SSR = Server Side Rendering

렌더링이 서버 쪽에서 일어남

클라이언트에게 전달하는 순간, 이미 렌더링 준비가 되어있어서 HTML 즉시 렌더링

HTML 결과를 서버에서 만들어서 웹 브라우저에 전달

자바 스크립트가 다운로드 되는 중에 사용자는 무언가를 볼 수 있음

-> 서버에서 렌더 가능한 상태로 클라이언트에게 전달해주기 때문에

---

• CSR과 SSR의 차이점

차이점이 무엇인가? -> 웹 페이지 로딩시간

 

1. 처음 접속 시

CSR은 HTML, CSS 등 모든 스크립트 한 번에 불러옴

SSR은 필요한 부분의 HTML과 스크립트만 불러옴

=> SSR이 더 빠름

 

2. 처음 접속 X

CSR은 처음 접속 시 모든 코드를 받아옴 

-> 다운 받을 필요가 없음

SSR은 처음 접속 시 했던 과정 다시 반복

=> CSR이 더 빠름

---

• 무엇을 사용해야 할까?

SSR 사용

- 네트워크가 느릴 때

- SEO(검색 엔진 최적화)가 필요할 때

- 처음 접속시 로딩이 빨라야 할 때

 

CSR 사용

- 사용자에게 보여줘야 하는 데이터의 양이 많을 때 -> 로딩창을 띄울 수 있음

- 웹 사이트와 사용자 간의 상호작용이 많을 때