CSR & SSR | Notion

<aside> 💡 CSR : Client Side Rendering

SSR : Server Side Rendering

</aside>

CSR에는 모바일 시대에 들어서 SPA가 등장했다.

SPA(Single Page Application)

최초 한 번 페이지 전체를 로딩한 뒤, 데이터만 변경하여 사용할 수 있는 애플리케이션으로, SPA는 기본적으로 페이지 로드가 없고, 모든 페이지가 단순히 HTML5 History 에 의해 렌더링된다.

서버쪽에서 pre-render를 끝마친 HTML을 브라우저에게 전달하는 방식으로, 기존의 전통적 방법인 SSR 방식에는 성능 문제가 있었다.

요즘 웹에서 제공되는 정보가 워낙 많다. 그래서 클라이언트가 서버에 데이터를 요청할 때마다 새로고침이 일어나면서 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고, 화면에 렌더링하는 방식인 SSR은 데어터가 많을 수록 성능 문제가 발생했다.

이는, 인터렉션이 많은 환경에서 비효율적이다. 렌더링을 서버쪽에서 진행하면 그만큼 서버 자원이 많이 사용되기 때문에 불필요한 트래픽이 낭비된다.