SPA MPA / CSR SSR 차이점

SPA VS MPA

SPA는 Single Page Application의 약자로 한개의 페이지로 이루어진 애플리케이션입니다. SPA의 반대는 MPA(Multiple Page Application)으로 여러개의 페이지로 이루어진 애플리케이션을 의미합니다.

MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운됩니다. 매번 전체 페이지가 다시 렌더링 됩니다. SPA는 애플리케이션에 필요한 모든 정적 리소스를 한번에 다운로드 합니다. 그 이후 새로운 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신합니다.

예를 들어, 제가 분식집에서 떡볶이를 주문했습니다. MPA 식당에서는 제가 떡볶이를 시킬 때마다 떡복이를 요리해서 저한테 전달이 됩니다. 하지만 SPA 식당에서는 처음 방문했을 때 미리 만들어진 떡볶이가 있고, 제가 요청한 부분만 전달한다고 보시면 됩니다.

그럼 각 식당의 장단점은 무엇일까요?

MPA 식당은 처음 제가 방문했을 때 떡볶이를 요리하고있지 않기 때문에 처음 방문때에는 기다리지 않아도 됩니다. 하지만 단점은 요청이 많을 때, 제가 10인분을 주문했을 때 미리 만들어둔 음식이 없기 때문에 기다려야 됩니다.

MPA 장점

첫 로딩이 짧다. (처음 방문 시 기다리지 않는다.)

SEO 관점에서 유리하다.

MPA 단점

매 페이지 요청마다 새로고침이 발생한다. (매번 요청할 때마다 처음부터 다시 음식을 조리해야한다.)

UX가 좋지 않다. (페이지 이동마다 요청을 새로 보내기 때문에 ‘깜빡’ 거리는 현상이 생긴다.)

SPA 식당은 미리 음식을 제조하고 있기 때문에 처음 방문했을 때 그 음식이 완성될 때 까지 기다려야 합니다. 그래도 나중에 음식을 주문할 때 미리 만들어진 음식이 있기 때문에 빨리 받을 수 있습니다.

SPA 장점

UX가 좋다 (페이지 이동 시 ‘깜빡’거리는 현상이 없다.)

SPA의 단점

SEO가 어렵다.

JS 파일을 번들링해서 한 번에 받기 때문에 처음 접속이 느리다. (떡볶이를 미리 조리해야되기 떄문에 처음 방문 시 기다리는 시간이 있다.)

CSR (Client Side Rendering)

렌더링이 클라이언트 쪽에서 일어나는 것을 말합니다. 즉, 서버는 요청을 받으면 그때 클라이언트에 HTML과 JS를 보내줍니다. 그 후에 클라이언트는 그것을 받아 렌더링을 시작합니다.

사용자가 첫 접속시에 요청을 보낸다.

HTML과 JS를 클라이언트로 보낸다.

클라이언트는 HTML과 JS를 다운로드 받는다.

이 때 사용자는 아무것도 볼 수 없다.

다운이 완료된 JS가 실행된다.

다운로드가 끝나면 이제 상호작용할 수 있다.

장점

컴포넌트 단위로 UI를 구성하기 때문에 재사용에 용이하고 중복을 줄일 수 있다.

사용자가 페이지를 전환할 때 부드럽다.

변경된 사항만 Server에 요청을 보내면 되기 때문에 비용적인 측면에서 효율적이다.

단점

초기 페이지 로딩이 오래걸린다.

검색엔진 최적화가 어렵다.

SSR (Server Side Rendering)

서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.

사용자가 첫 접속시에 요청을 보낸다.

서버는 즉시 렌더링 가능한 html 파일을 보낸다.

js파일은 전달받지 못했기 때문에 기능 작동은 하지 않는다.

js 파일을 다운로드 받는다.

브라우저가 JS 프레임워크를 실행한다.

JS 다운이 완료가 되면 그때부터 상호작용할 수 있다.

장점

CSR에 비해 렌더링 속도가 빨라 사용자가 기다리는 로딩시간이 짧다.

검색엔진 최적화가 쉽다.

단점

CSR에 비해 서버에 부하가 많다.

사용자가 페이지를 전환 시 화면이 깜빡깜빡 거린다는 느낌을 받을 수 있다.

CSR VS SSR

CSR과 SSR 중 뭐가 더 좋고 안좋고는 없습니다. 그냥 방식의 차이입니다. 상황을 고려하며 사용하는 것이 좋습니다.

첫 화면

CSR - HTML 파일과 JS 파일을 다 다운로드 할 때 까진 흰 화면이다.
SSR - 렌더링된 HTML을 먼저 보여준다.

상호작용 시간

CSR - HTML과 JS 파일을 다 다운로드 후에 작동할 수 있다.
SSR - HTML은 미리 보여져 있고 JS 파일을 다운로드 후에 작동할 수 있다.

초기 로딩

대규모 데이터를 처리해야하는 경우, CSR은 초기 로딩속도가 느려지고 서버의 부하를 증가시킬 수 있습니다.
이러한 경우 사용자 경험을 위해 SSR로 처리하여 미리 데이터를 보여지게 하는 것이 좋습니다. 초기 로딩 속도와 SEO 최적화를 개선하면서도 많은 양의 데이터를 처리할 수 있습니다.

Nextjs를 사용하는 이유

React 애플리케이션은 주로 SCR 방식을 사용합니다. React에서 SSR하는 방식이 있지만 상당히 복잡합니다. 하지만 Nextjs는 React 애플리케이션을 빠르고 간단하게 SSR할 수 있으며, 이를 통해 초기 로딩 속도와 검식 엔진 최적화를 향상시킬 수 있습니다.

SSR 이외에도 이미지 최적화, 간편한 라우팅이라는 이점이 있습니다.

Reference

SPA vs MPA와 SSR vs CSR 장단점 뜻정리 - 하나몬

MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다. 반면 SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다. 그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다.

https://hanamon.kr/spa-mpa-ssr-csr-장단점-뜻정리/

[간단정리] CSR vs SSR 특징 및 차이

개요 CSR vs SSR 특징 및 차이점 알아보기 내용 CSR Client Side Rendering의 약자 말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. 즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내준다. 클라이언트는 그것을 받아 렌더링을 시작한다. 위의 사진은 CSR의 단계를 설명한다. 1. User가 Website 요청을 보냄. 2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다. CDN : aws의 cloudflare를 생각하면 됨. 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식 3. 클라이언트는 HTML과 JS를 다운로드 받는다. (이때 SSR과 달리 유저는 아무것도 볼 수 없다.) 4. 생략 5. 다운이 완료..

https://hahahoho5915.tistory.com/52