SPA (Single Page Application) , SSR(Server Side Rendering), CSR(Client Side Rendering)

SPA 란 말 그대로 한개의 페이지를 가진 어플리케이션이다. 왜 SPA로 개발하는가?

• 사용자 친화적
• 초기 렌더링 후 데이터만 받아오기 때문, 상대적으로 서버 요청이 적다.
• Virtual Dom
• Front End 와 Back End 분리로 개발업무 분업화 및 협업이 용이하다.
• 개발이 상대적으로 효율적이다.

이 정도의 이유들로 설명 가능하다고 생각한다.

기본적으로 SPA는 CSR 이지만 그렇다고 SPA === CSR은 아니다.

SSR(Server Side Rendering)

 SSR 많은 웹 사이트들은 페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 하는 방법을 택하여 사용하고 있다 이러한 방식이 SSR 이다. 서버에서 렌더링을 마치고, Data가 결합된 HTML 파일을 내려주는 방식이 므로, 새로운 페이지로 이동할 때마다 서버에 요청하여 페이지를 받아야 하기 때문에, 받아오는 시간동안 깜빡거리는 현상을 볼 수 있다.

CSR(Client Side Rendering)

 CSR CSR 방식은 최초 요청시에 HTML을 비롯해 CSS,JavaScript 등 각종 리소스를 받아온다. 이후에는 서버에 데이터만 요청하고, JavaScript View를 컨트롤 한다. 당연히 초기 요청대 SSR 보다 많은 리소스를 요청하기 때문에, 렌더링 속도는 SSR이 더 빠르다. 하지만 이후 다른 페이지로의 이동시에는 SSR 보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공한다.

• 만약 인터넷 속도가 심각하게 느리다면, 사용자는 웹페이지가 죽어있어 보이는 흰색 페이지 화면을 보게 될것이며, 제대로된 페이지 화면을 한참 후에나 보게 될것이다.

SEO(Search Engine Optimization) 문제

React.js 혹은 Vue.js를 사용하면서, CSR을 할지 SSR을 할지 고민하게 되는 이유는 SEO 때문이라 볼 수 있다.
물론 회사내에서만 사용하는 CMS라면 신경 쓸 필요가 없지만 공식 홈페이지와 같이 일반 사용자에게 검색되어야 하는 사이트라면 SEO 때문에 SSR에 대하여 생각하게 된다.

Google은 크럴러 안에 자바스크립트 엔진이 들어있어서 크게 문제될것 없지만, Naver 와 Daum 은 자바스크립트를 해석할 수 있는 엔진이 없기때문에 빈페이지로 인식하므로 문제가 된다.

• 참고 링크
• 참조 블로그