SSR VS CSR

Client Side Rendering이란?

클라이언트 사이드 렌더링은 클라이언트인 브라우저가 렌더링을 처리하는 방식입니다. 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 되는 것입니다.

장점

네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있습니다.
후속 페이지 로드시간이 더 빠릅니다. CSR을 위해 이미 모든 스크립트가 사전에 로딩되었기 때문에 로드시간이 줄어듭니다.
별도의 API를 호출할 필요 없는 페이지면 지연 로딩 모듈이 필요하지 않습니다.
서버 호출 시 전체 UI를 다시 로드할 필요가 없습니다.

단점

첫 페이지 로딩 속도가 서버에 첫 요청 시 전체 페이지에 대한 모든 파일을 받기 때문에 서버 사이드 렌더링에 비해 많이 느립니다.
검색엔진최적화(SEO)에 대한 추가적인 작업이 필요합니다. 크롤러가 해당 페이지에 처음 방문했을 때 빈 페이지기 때문에 어떤 사이트인지 이해할 수 없습니다.

Server Side Rendering이란?

서버 사이드 렌더링은 클라이언트가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식입니다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 제공하기 때문에 서버가 화면을 그리는 주체가 됩니다.

장점

처음으로 페이지를 들어갔을 때 로딩 속도가 첫 페이지만 우선적으로 전달하여 렌더링하기 때문에 클라이언트 사이드 렌더링에 비해 빠릅니다.
SEO 최적화가 가능합니다.

단점

초기 로딩 이후 페이지 이동이 느립니다. 페이지를 이동할 때마다 클라이언트가 서버에게 필요한 데이터를 요청하기 때문에 다소 느립니다.

그래서 둘 중 어떤게 더 좋은걸까?

CSR, SSR은 각각의 장단점이 존재하기 때문에 적절한 상황에서 사용을 하면 됩니다. CSR은 네트워크가 빠르고, 서버의 성능이 좋지 않을 때 사용할 수 있으며, 웹 어플리케이션에서 사용자와 상호작용할 것들이 많을 때나 사용자에게 보여줘야 하는 데이터의 양이 많을 때 로딩창을 띄울 수 있으므로 이러한 장점이 있습니다.

반대로 SSR은 CSR은 한번에 모든 것을 불러오지만 SSR은 각 페이지마다 나눠 불러오므로 네트워크가 느리거나, SEO가 필요할 때 사용할 수 있을 것입니다. 또한, 웹 사이트가 상호작용이 별로 없다면 SSR을 적합합니다.

그렇기 때문에 상황에 맞게 누가 더 좋다보다는 상황에 맞게 적절하게 사용해야합니다.