내가 이해한 CSR(Client-Side-Rendering), SSR(Server-Side-Redering)를 한마디로 요약해보자면
CSR은 트럭, SSR은 소형차 이다.
CSR과 SSR은 상황에 따라 무엇을 사용할지 결정해야 한다.
만약 우리가 이사를 한다고 가정해보자.
이런 경우는 트럭이 알맞을 것이다.
트럭은 한번에 모든 짐을 가져오기 용이하지만 처음 가져올 때 시간이 걸릴것이다.
하지만 한 번 가져오면 물건을 찾을 때 그 안에서 찾으면 되기 때문에 가져오기만 하면 그 안에서 물건을 빨리 얻을 수 있을 것이다.
이번엔 만약 우리가 마트에 간다고 가정해보자.
이런 경우는 소형차가 알맞을 것이다.
소형차는 내가 필요한 물품만 그때그때 가져오기 용이하지만 갑자기 더 필요한 물품이 생기는 상황이 자주 나오면 왔다갔다 번거로울 것이다.
하지만 모든 짐을 싣지 않아도 되기 때문에 처음에 갔다오는 시간이 트럭보다는 더 빠를 것이다.
자 이제 CSR과 SSR의 특징을 살펴보자.
- CSR
- 클라이언트인 브라우저가 렌더링을 처리하는 방식
- 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 되는 것.
장점
- 빠른 인터렉션
- 렌더링을 브라우저가 담당하기 때문에 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공함.
- 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 함.
단점
- 첫 페이지 로딩 속도가 SSR에 비해 느림.
- 서버에 첫 요청 시 전체 페이지에 대한 모든 문서 파일을 받기 때문.
- SEO 따로 작업 필요.
- SSR
- 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식.
- 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 만들어 제공함.
- 즉, 서버가 화면을 그리는 주체.
장점
- 첫 페이지 로딩 속도가 CSR에 비해 빠름.
- 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링하기 때문에 초기 로딩 속도가 CSR에 비해 빠름.
- 따로 작업 없이 SEO 가능
단점
- 초기 로딩 페이지 이후 페이지 이동 시 속도가 CSR보다 느림.
- 페이지 이동 시마다 클라이언트가 서버에게 필요한 데이터를 요청하고 서버가 응답해주는 방식이기 때문에 이동시 속도는 CSR보다 느리다.
- ⇒ 깜빡임
- 무엇을 사용해야 할까?
SSR : 네트워크가 느릴 때, SEO최적화 필요할 때, 페이지 이동이 별로 필요 없을 때, 초기 로딩이 중요할 때
CSR : 네트워크가 빠를 때, SEO최적화 필요 없을 떄, 페이지 이동이 필요할 때
참고
댓글