SPA, SSR, CSR

 

SSR: Server Side Rendering

 

 

페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 하는 방식

 

 

 

장점

• 화면 전체가 한방에 그려짐
• 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능
• 매번 새로고침 되기 때문에 사용자 UX가 다소 떨어짐
• 서버에 매번 요청을 해서 트래픽이 발생

 

 

SPA: Single Page Application

 

 

 

 

 

한 개의 페이지를 가진 애플리케이션

리액트, 앵귤러, 뷰 같은 자바스크립트 기반 프레임워크를 사용해 SPA로 개발한다.

 

장점

• 자연스러운 페이지 느낌

전체 페이지를 업데이트할 필요가 없어서 깜빡거림이 없다.

• SPA는 서버에게 정 적리 소를 한 번만 요청하고, 받은 데이터는 전부 캐시로 저장한다.
• 서버의 템플릿 연산을 클라이언트로 분산
• 컴포넌트별 개발 용이

 

단점

• JS 파일을 번들링 해서 한 번에 받기 때문에 초기 구동 속도 느림
• 검색엔진 최적화(SEO)가 어렵다.

 

 

 

 

Virtual DOM

DOM 이란 ‘Document Object Model’의 약자로 주로 html 문서 내에 요소를 말한다. html, css, javascript로 만들었던 웹사이트에서는 querySelector 나 getElementbyID 같은 것들로 직접 DOM 요소를 찾아 직접 조작한다. 이렇게 직접 요소를 조작하는 방식은 페이지 내에 정보가 변할 때마다 다시 페이지를 로드해야 해서 페이지 용량이 크면 클수록 느려지는 단점이 있다. 그러나 CSR 방식으로 한 번에 모든 정보를 받고 Virtual DOM을 이용해 페이지 내에 변한 부분만을 감지해서 그 부분만 변경해주게 되면 훨씬 부담을 줄일 수 있다.