SPA / CSR / SSR / SSG
SPA (Single Page Application)
AJAX가 등장하면서 전통적으로 MPA 디자인 패턴을 따르던 개발 방식에 변화가 생겼다.
클라이언트에서 데이터를 요청할 때 새 HTML 페이지를 받지 않고 데이터를 갱신할 수 있게 됐다.
SPA는 웹 페이지에서 처음 응답받을 때 딱 한 번만 HTML, CSS, 자바스크립트 같은 자원을 내려받고 다음 요청부터는 응답받은 데이터로 필요한 부분만 변경한다.
응답 데이터는 XML, CSV, HTML 등의 형식으로 받을 수 있는데, JSON 데이터를 가장 많이 사용한다.
SPA는 클라이언트의 요청으로 응답받은 데이터를 웹 페이지에서 직접 변경한다.
소스 코드를 읽어 웹 브라우저에 보이게 그래픽 형태로 출력하는 과정, 즉 렌더링을 클라이언트에서 하는 것이다.
그래서 SPA를 CSR(Client Side Rendering)이라고도 한다.
앵귤러, 리액트, 뷰는 모두 SPA 디자인 패턴을 기반으로 한다.
장점
- 웹 페이지 전체를 다시 로딩하지 않고 변경되는 부분만 업데이트 하기 때문에 페이지 갱신에 따른 부담이 적다.
- 모든 요청에 대해 새로 고침이 발생하는 MPA 디자인 패턴과 달리 웹 페이지가 변경돼도 새로 고침이 발생하지 않아 사용자 경험(UX)이 좋아진다.
단점
- 모든 페이지가 분리돼 있지 않아 검색 엔진 최적화에 매우 불리하다.
- 하나의 웹 페이이 내에서 데이터가 변경되기 때문에 보안 측면에서 취약하다.
- 웹 브라우저의 히스토리를 따로 관리하지 않으므로 URL 개념이 없다. 브라우저에 표시되는 형식상의 URL은 있지만 실제로 URL에 따른 페이지가 별도로 존재하지 않는다.
SSR (Server Side Rendering)
SSR은 SPA의 검색 엔진 최적화 불리함의 문제를 해결한 것으로, 웹 페이지를 서버에서 렌더링한다.
사용자에게 데이터를 전달해 클라이언트에서 업데이트하는 SPA 디자인 패턴과 달리 모든 데이터를 서버에서 생성한다.
장점
- 초기 로딩 속도가 빠르다. SPA와 달리 서버에서 이미 렌더링한 데이터를 응답받기 때문에 페이지 로딩 속도가 SPA보다 빠르다.
- 검색 엔진 최적화에 유리하다. 검색 엔진 로봇이 정보를 수집해 가기 좋다. 이는 검색 엔진에 웹 사이트 정보가 계속 수집된다는 뜻이므로 결국 검색 엔진 최적화에 큰 영향을 미친다.
단점
- 새로운 페이지 요청 시 SPA에 비해 로딩 속도가 느리다고 느낄 수 있다.
SSG (Static Site Generation)
클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가 요청을 받으면 이미 완성된 파일을 단순히 반환하여 브라우저에서 뷰를 보여지게 된다.
SSR과 SSG의 차이점은?
서버에서 요청할 때 즉시만드느냐 혹은 미리 만들어 놓느냐에 따라 차이가 있다.
SSR은 요청시 서버에서 즉시 HTML을 만들어서 응답하기 때문에 데이터가 달라져서 미리 만들어 두기 어려운 페이지에 적합하다.
반면 SSG 미리 다 만들어두고 요청시에 해당 페이지를 응답하기 때문에 바뀔일이 거의없어서 캐싱해두면 좋은 페이지에 사용된다.
- 움 잘 모르곘음 🤤
그렇다면 무엇을 사용해야하는가?
용도는 서비스 성격에 따라 달라진다.
유저랑 상호작용이 많고 고객의 개인정보로 기준으로 이루어지는 서비스라면 검색엔진 노출보다 고객의 데이터를 보호하는 것이 더 중요할 수 있다 -> CSR
회사홈페이지이기 때문에 상위노출이 필요하고 누구에게나 항상 같은 내용을 보여줘야하며 매주 업데이트 되어야한다면 ->SSR
회사홈페이지이기 때문에 상위노출이 필요하고 누구에게나 항상 같은 내용을 보여줘야 하지만 업데이트를 거의 하지 않아도 된다면 -> SSG
만약 사용자에 따라 페이지 내용이 달라지며 화면깜빡임 없는 빠른 인터렉션이 중요하고 상위노출이 필요하다면 -> CSR + SSR = Universal랜더링을 고려해야한다!
