SSR vs CSR
SSR vs CSR
SSR(server-side rendering) 과 CSR(client-side rendering)을 알아보기 위해
각각의 정의와 둘의 차이점 그리고 어떤 상황에서 어떤 방식을 사용하는 것이 적절할지에 대해 정리한다.
SSR이란?
SSR은 server-side rendering을 의미한다. 이것은 웹 어플리케이션이 웹 페이지를 브라우저에서가 아닌 서버에서 렌더링하는 방법이다. 이 방법을 사용한다면 페이지가 클라이언트 사이드에 도착했을 때 이미 렌더링된 상태일 것이다. 서버 사이드에서 요청을 받은 경우, 서버는 모든 것을 컴파일한다. 만약 페이지가 데이터베이스로부터 데이터를 가져오기를 원한다면 서버가 그 작업을 수행할 것이다. 그 다음 완전히 렌더링 된 페이지에 데이터를 렌더링하고 이를 클라이언트에게 응답으로 전송할 것이다. 그런데 만약, 클라이언트가 다른 경로로 navigate 한다면, 그리고 매번 다른 경로로 navigate 한다면, 서버는 이 과정을 계속해서 반복할 것이다.
CSR이란?
CSR은 client-side rendering을 의미한다. 전반적으로 CSR은 SSR의 반대 개념이다. CSR은 클라이언트 사이드에서 페이지를 렌더링한다. 서버가 요청을 받으면 서버는 페이지를 렌더링하는 대신 클라이언트에게 페이지의 뼈대가 될 하나의 페이지를 전송한다. 서버는 자바스크립트 파일을 함께 보낼 것이다. 그 다음 자바스크립트 파일이 페이지를 완전히 렌더링된 페이지로 변환시킬 것이다. 그리고 만약 컨텐츠(데이터)가 필요한 경우 api를 사용한다. 클라이언트는 api에게 데이터를 가져와 페이지에 렌더링 하는 것을 요청할 것이다. CSR은 클라이언트가 다른 경로로 navigate 하더라도 페이지를 다시 전송하지 않는다. 대신에 클라이언트가 요청받은 주소에 대한 재-렌더링을 수행할 것이다. 그렇기 때문에 처음 요청한 페이지가 계속해서 그대로 사용된다.
차이점
SSR과 CSR의 주된 차이점은 어디서 페이지가 렌더링 되는가이다. SSR은 페이지를 서버측에서 렌더링하고 CSR은 페이지를 클라이언트측에서 렌더링한다. 클라이언트 사이드는 클라이언트의 다른 경로에 대한 요청에 따른 페이지 리프레싱을 하지 않고 라우팅을 동적으로 관리한다.
SSR을 사용하는 경우
- SEO가 나의 우선사항인 경우
- 페이지의 빠른 초기 로딩을 원할 경우
- 페이지의 컨텐츠가 많은 사용자 상호작용을 필요로하지 않는 경우
CSR을 사용하는 경우
- SEO가 나의 우선사항이 아닌 경우
- 페이지가 상호작용이 많은 경우
- 웹 어플리케이션을 만드는 경우