SSR과 CSR 그리고 SPA

SSR과 CSR 그리고 SPA

목차

 - SPA

 - SSR

 - CSR

 - CSR의 문제 그리고 SEO

 

SPA(Single Page Application)

SPA란 말 그대로 한개의 페이지를 가진 어플리케이션 입니다.

SPA로 개발하는 이유??

 1. 사용자 친화적

 2. 초기 렌더링 후 데이터만 받아오기 때문에 상대로적으로 서버 요청이 적습니다.

 3. Virtual Dom

 4. 프론트 앤드와 백앤드 분리로 개발업무 분업화 및 협업이 용이 합니다.

 5. 개발이 상대적으로 효율적 입니다.

기본적으로 SPA는 클라이언트 사이드 렌더링 이지만 SPA와 CSR이 같은건 아닙니다.

 

SSR(Server Side Rendering)

과거로 부터 그리고 현재도 그렇지만 많은 웹사이트들은 페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 하는 방식을 택하고 있습니다.

이 방식이 SSR입니다. 서버에서 렌더링을 마치고, Data가 결합된 HTML파일을 내려주는 방식입니다.

새로운 페이지로 이동할 때마다 서버에 요청하여 페이지를 받아야 하기 때문에, 받아오는 시간동안 깜빡거리는 현상을 마주할 수 있습니다.

한편, SPA(Single Page Application) 기법이 대두 되면서 CSR 방식이 각광받기 시작했습니다.

CSR(Client Side Rendering)

CSR 방식은 최초 요청시에 HTML을 비롯해 CSS, Javascript 등 각종 리소스를 받아 옵니다. 이후에는 서버에 데이터만 요청하고, 자바스크립트로 뷰(view)를 컨트롤 합니다.

당연히 초기 요청 때 SSR 보다 많은 리소스를 요청하기 때문에, 렌더링은 속도는 SSR이 더 빠릅니다.

하지만 이후 다른 페이지로의 이동시에는 SSR 보다 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공한다.

만약 인터넷 속도가 매우 느리다면 유저는 제대로된 화면을 한참 후에나 만나볼 것 입니다.왜냐하면 일단 처음 보게될 HTML은 빈페이지가 될것이니 말입니다.

CSR의 문제 그리고 SEO

아무래도 리액트나 뷰를 사용하면서, CSR을 할 지 SSR을 할 지 고민하게 되는 이유는 SEO 때문 입니다. 

물론 회사내에서만 사용하는 시스템 이라면 신경쓸 필요가 없지만 공식 홈페이지와 같이 일반 사용자에게 검색되어야 하는 사이트라면 SEO 때문에 SSR에 대해 생각하게 됩니다.

사실 구글은 크롤러 안에 자바스크립트 엔진이 들어있어서 크게 문제가 되지 않습니다.

하지만, 네이버나 다음은 자바스크립트를 해석할 수 있는 엔진이 없어서 빈 페이지로 인식할테니 문제가 될것 입니다.

이를 해결하기 위해 SSR with Hydration 기법이 나왔는데, 대표적으로 React 진영의 Next.js와 Vue 진영의 Nuxt.js가 위 기법을 구현한 프레임 워크입니다.

즉, 처음엔 서버사이드 렌더링을 하고, 그 후 다른 페이지들에선 클라이언트 사이드 렌더링을 이용하는 방식입니다.