TIL 80일차_SSR, CSR

오늘의 주제는
SPA를 다루다보면 듣게되는
SSR과 CSR이다!! 😎

SSR (Server Side Rendering)

서버측 렌더링.
일반적으로 백엔드 측에서 템플릿 엔진을 사용하여 뷰를 보여주며
JSP, Django의 template engine, NodeJS의 pug,ejs 등이 있다.

SSR은 맨 처음 웹페이지를 로드할 때 빠른 속도를 보여준다.
이유는 한번의 요청, 그리고 한번의 응답으로 페이지를 생성하기 때문이다.
덕분에 일정한 퍼포먼스를 보여주고, 전부 계산된 HTML을 보여주므로
HTML의 SEO (Search Engine Optimization, 검색엔진최적화) 옵션들이 전부 살아 있다.

그러나 이때문에, SSR은 페이지의 작은 부분중 하나만을 업데이트 할 일이 생기더라도,
페이지 전체를 다시 서버가 계산하여 로드를 해야하는 불필요한 리소스 낭비가 생기게 된다.

CSR (Client Side Rendering)

CSR과 SPA(Single Page Application)은 동일한 의미는 절대 아니지만 굉장히 자주 같이 쓰인다.

SPA는 단일 페이지에서 여러가지 기능을 하도록 제작된 페이지를 의미하며,
CSR은 매번 서버가 뷰를 생성하는 것이 아니라, 최초에만 서버가 뷰를 만들어주고 이후에는
업데이트가 필요한 부분만 따로 클라이언트 측에서 결정하고,계산하고,요청하여 그부분만 업데이트 시키는 방식이다.
따라서 최초 페이지의 로드에서는,
각 컴포넌트가 서버에 각기 다른 요청을 하므로 로딩이 SSR에 비해 느리지만,
이후에는 변경이 필요한 컴포넌트만 요청하여 변경하기때문에 빠른 렌더링 속도를 보여준다.

그러나 CSR은 완성된 HTML을 로드하지 않고, 리액트는 .jsx, Vue는 .vue와 같은 파일로 생성되기 때문에
HTML만을 파싱하는 검색엔진에 노출이 되지 않는다는 단점이 있다.

정리

초기 렌더링 속도는 CSR보다 SSR이 빠르다.
그리고 정보만 간단히 전달해도 된다면 그냥 plain HTML이 가장 빠르다.

하지만 최근 트렌드에 따르면 SPA가 대세이고 SPA에 CSR 방식이 아주 적합하기 때문에 CSR을 많이 사용하는 것이다.

그리고 React에서도 SEO를 위해 React Helmet과 같은 라이브러리를 적용하기도 하고,
NextJS를 사용하여 리액트를 서버 사이드 방식으로 사용하기도 한다.