❔ SPA ? MPA ?
- Single Page Application
단일 페이지 애플리케이션으로, 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미합니다. (필요한 부분만 동적으로 변경)
한 개(Single)의 Page로 구성된 Application
초기의 SPA는 AJAX(비동기적 정보 교환 기법) 통신을 활용하여 데이터를 동적으로 바인딩 하는 방식이었습니다. 하지만 모든 과정을 순수한 AJAX로 구현하기에는 비용이 많이 들어, 이를 도와주는 React, Vue, Angular와 같은 프레임워크가 대두되었습니다.
TTV (Time To View) : 사용자가 어플리케이션 화면을 보기까지 걸리는 시간
TTI (Time To Interact) : 사용자가 어플리케이션 화면과 상호작용 할 수 있기까지 걸리는 시간
SPA의 장점
- 한 번에 필요한 데이터들을 전송받고, 필요한 부분만 업데이트하기 때문에 로딩 속도와 반응이 빠릅니다.
- 페이지 전환을 할 때도 깜빡임 없이 부드럽게 넘어가 사용자 경험을 올려줍니다.
- 비동기 방식으로 필요한 부분만 따로 업데이트가 가능하기 때문에 실시간 업데이트나 데이터 시각화와 같은 동적 요소가 많은 웹 앱을 만들때 SPA 방식이 유용합니다. (서버의 부담도 down)
- TTV와 TTI가 동시에 시작되기에, 사용자는 페이지가 로딩되자마자 곧바로 애플리케이션을 사용할 수 있습니다.
SPA의 단점
- TTV가 상대적으로 늦습니다. 페이지의 초기 렌더링 전까지 사용자는 빈 화면만 봐야합니다.
- SEO에 불리합니다.
- SPA는 하나의 페이지에 여러 페이지를 클라이언트 사이드에서 자바스크립트로 구현하는 방식이기 때문에 자바스크립트를 읽지 못하는 검색엔진에 대해서는 크롤링이 안되어 색인이 되지 않는 문제가 발생할 수 있습니다.
- 사용자의 정보를 클라이언트 측에서 관리할 경우, 보안 이슈가 발생할 수 있습니다.
- Mutiple Page Application
여러개의 페이지로 이루어진 어플리케이션. 새로운 페이지를 요청할 때 마다 서버에서 렌더링 된 정적 리소스를 전달합니다.
다른 페이지로 이동시 또는 새로 고침 될 시, 서버에서 페이지를 다시 렌더링 해야합니다.
MPA의 장점
- TTV가 SPA에 비해 월등히 빠릅니다.
- SEO에 유리합니다.
MPA의 단점
- TTI가 상대적으로 늦고, 상호작용이 되기까지 사용자는 어떠한 상호작용도 할 수 없습니다.
- 페이지를 이동할 때마다 서버에서 파일을 받아야하기에, 매 요청마다 깜빡임 현상이 발생합니다.
- 서버에서 매 요청 시에 보내야 할 데이터의 사이즈가 커짐으로서, 서버 트래픽이 상승할 가능성이 높습니다.
❔ CSR ? SSR ?
▪️ Client Side Rendering
클라이언트(브라우저)가 렌더링을 맡아서 하는 방식
서버에서 받은 데이터를 브라우저가 화면에 그립니다.
1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 콘텐츠를 요청
2. 서버는 빈 뼈대만 있는 HTML을 응답
3. 브라우저가 연결된 JavaScript 링크를 통해 서버로부터 JavaScript 파일을 다운로드
4. 동적으로 페이지를 만들어 브라우저에 띄움
CSR의 특징
- 서버의 부하가 적음
- 클라이언트에서 연산, 라우팅을 직접 처리하기 때문에 반응속도가 빠르고 UX가 우수
- 웹 크롤러는 HTML을 읽어 검색 가능한 색인을 만들어 내는데, 웹 크롤러 봇 입장에서는 HTML이 텅텅 비어 있는 것처럼 보여서 색인할만한 콘텐츠가 존재하지 않기에, SEO(검색엔진 최적화)에 불리
- 구글의 크롤러 봇은 자바스크립트를 실행할 줄 알기에 CSR 웹 크롤링도 가능하다고 하나, 아직 완벽한 단계가 아니기에 구글 측에서도 여전히 SSR을 고려하라는 말을 덧붙이고 있음
▪️Server Side Rendering
서버에서 렌더링을 하여 화면을 보여주는 방식
서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그립니다.
1. 유저가 웹사이트에 방문하면, 브라우저가 서버에 컨텐츠를 요청
2. 서버는 페이지에 필요한 데이터를 얻어와 모두 삽입하고, CSS 까지 모두 적용해 렌더링 준비를 마친
HTML과 JavaScript코드를 브라우저에게 응답
3. 브라우저는 JavaScript 코드를 다운로드하고, HTML과 JavaScript로직을 연결
SSR의 특징
- 초기 구동 속도가 빠름
- SEO에 유리
- 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문, 크롤러 봇이 HTML을 잘 읽을 수 있음
- 화면 깜빡임이 있음
- TTV와 TTI 사이에 간극이 있음
- 서버 부하가 있음
🔔 그래서 CSR, SSR이랑은 무슨 상관?
- SPA는 클라이언트 단에서 화면 전환을 수행하기 때문에 CSR 방식을 취하고 있습니다. (SPA를 구현하기 위해 CSR 방식을 사용)
- 웹 애플리케이션에 필요한 정적 리소스를 한꺼번에 모두 다운로드하고, 이후 새로운 페이지 요청이 왔을 때 필요한 데이터만 전달받아서 클라이언트에서 필요한 페이지를 갱신하기 때문
- MPA는 새로운 요청이 있을 때마다 서버에서 이미 렌더링 된 정적 리소스를 받아오기 때문에 SSR 방식이 더 구현이 쉽습니다.
SPA VS MPA 애플리케이션 구동을 위해 페이지를 하나만 쓰는지 여러 개를 쓰는지에 대한 차이 !
CSR VS SSR 페이지의 렌더링이 클라이언트에서 일어나는 지 서버에서 일어나는지에 대한 차이 !
⇒ 사용자 경험이 우선 시 될 경우에는 SPA, 초기 로딩 속도와 SEO가 중요한 경우에는 SSR
💡Nextjs의 경우, 첫 로딩의 경우에만 SSR을 사용하고, 이후의 요청에 대해서는 CSR 방식을 사용할 수 있습니다.
🔑 기업의 입장에서는 페이지를 검색엔진에 띄어 수익창출을 해야하므로 SEO가 최적화된 MPA(SSR), 사용자 경험을 향상시킨 SPA(CSR)을 조합하여 사용할 수 있습니다. ⇒ 하이브리드 애플리케이션
❓ 예상 질문
SPA가 무엇인가요?
Single Page Application으로,
서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미합니다. 페이지 전환을 할 때도 깜빡임 없이 부드럽게 넘어가 사용자 경험을 올려주는 장점이 있습니다.
SSR이 무엇인가요?
Server Side Rendering으로, 서버에서 렌더링하여 화면을 보여주는 방식입니다. 서버로부터 완전하게 만들어진 HTML 파일을 받아와 화면을 그리기 때문에 첫 화면 로딩 속도가 빠르고, SEO에 유리하다는 장점이 있습니다.
출처
https://dev-ellachoi.tistory.com/28
