페이지 구성 개수에 따라서 MPA와 SPA로 나뉘며, 렌더링 방식에 따라서 SSR과 CSR로 나뉜다.

MPA vs SPA

👀 정의

MPA 정의

MPA란 Multiple Page Application의 약자로, 여러 페이지로 구성된 애플리케이션을 의미한다.
사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식으로 동작한다. 사용자의 아주 사소한 동작으로 생기는 이벤트에도 매번 전체 페이지를 렌더링 해야 한다.

SPA 정의

SPA란 Single Page Application의 약자로, 하나의 페이지로 구성된 애플리케이션을 의미한다.
하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 컨텐츠를 변경하는 방식으로 동작한다.
처음에 한 번만 정적 리소스를 다운받고, 그 이후에는 새로운 요청이 들어오면 필요한 부분만 변경한다.

👍 장점

MPA 장점

• SEO(Search Engine Optimization, 검색 엔진 최적화)에 유리하다. 페이지가 서버에서 완성 돼서 클라이언트쪽으로 넘어오기 때문에, 검색 엔진이 크롤링하기에 좋다.
• 첫 로딩이 매우 빠르다.

SPA 장점

• UX의 관점에서 우수하다.
  • 변경이 필요한 부분만 변경하기 때문에 화면 깜빡임 등의 현상이 없다.
• 필요한 리소스만 부분적으로 받아올 수 있다.
• 클라이언트와 서버가 분리됨에 따라 서버가 없어도 클라이언트를 개발할 수 있다.
  • 확장 가능한 개발이 가능하다. (클라이언트와 서버가 서로를 고려하지 않아도 되기 때문)

👎 단점

MPA 단점

• 클라이언트와 서버가 분리되지 않고 서로 엮여있다. 이로 인해 애플리케이션의 규모가 커지고 서버가 죽으면 클라이언트도 동작하지 못하게 된다. 또한 개발 복잡도가 증가한다.
• 매번 페이지 전체를 새로 불러와야 하기 때문에 화면 깜빡임 등의 UX를 저해하는 요소가 있다.

SPA 단점

• 초기 구동 속도가 느리다. 초기에 웹 애플리케이션에서 필요한 모든 정적 리소스를 다운 받아야 하기 때문이다.
  • 코드 스플리팅으로 해결 가능하다.
• SEO 관점에서 불리하다. 비어있는 HTML을 받기 때문에 검색 엔진이 데이터를 수집하기 어렵다.
  • SSR 또는 React에서는 react-helmet을 통해 보완 가능하다.

SPA로 구성된 애플리케이션에 SSR이 필요한 이유

가장 큰 이유로 SEO 문제가 있다. 위에서 단점으로 언급한 것처럼 SPA의 HTML은 빈 파일이기 때문에 검색 엔진이 데이터를 수집하기 어렵다. 따라서 SSR을 사용하게 된다면 SEO 측면에서 유리하게 된다.

SSR vs CSR

👀 정의

SSR 정의

SSR(Server Side Rendering)은 브라우저에서 웹 페이지를 렌더링하는 대신 서버에서 웹 페이지를 생성하는 방법이다.
서버에서 완전히 렌더링 된 페이지를 클라이언트로 보낸다.

CSR 정의

CSR(Client Side Rendering)은 자바스크립트를 사용하여 브라우저에서 직접 페이지를 렌더링하는 것을 의미한다.
모든 로직, 데이터 패칭, 템플릿 및 라우팅은 서버가 아닌 클라이언트에서 처리된다.
서버는 빈 HTML 파일과 모든 로직을 처리하는 자바스크립트 번들을 반환한다.

👍 장점

SSR 장점

• 동적 컨텐츠가 포함된 페이지를 만드는 데 사용할 수 있다.
• 페이지가 로드 되는 즉시 컨텐츠가 나타나므로 유저가 빠르게 컨텐츠를 확인할 수 있다.
  • 필요한 부분의 HTML과 스크립트만 불러오기 때문에 비교적 CSR 방식에 비해 초기 로딩 속도가 빠르다.
• SEO에 유리하다.

CSR 장점

• 동적 컨텐츠가 포함된 페이지를 만드는 데 사용할 수 있다.
• 서버 이용률이 높지 않다.
  • 클라이언트와 서버가 분리되었기 때문이다.
• 처음 로드한 후 다른 페이지를 로드하는 속도가 매우 빠르다.

👎 단점

SSR 단점

• 모든 요청이 서버에서 처리되기 때문에 서버에 높은 연산 능력을 필요로 한다.

CSR 단점

• SEO에 불리하다.
• 느린 초기 로드 시간과 상호 작용하기 위한 시간이 성능 저하를 일으킨다.

💫 사용하는 경우

SSR을 사용하는 경우

• 네트워크가 느린 경우
  • CSR은 한번에 모든 것을 불러오지만, SSR은 각 페이지마다 나눠 불러오기 때문이다.
• SEO가 필요한 경우
• 웹 사이트에 상호 작용이 별로 없는 경우
  • (ex) 정보성 페이지
• 최초 로딩이 빨라야 하는 경우
  • 커머스 사이트의 경우 사용자의 이탈율은 돈으로 이어지기 때문에 초기 로딩 속도가 빨라야 한다.

CSR을 사용하는 경우

• 네트워크가 빠른 경우
• SEO에 관심 없는 경우
• 애플리케이션에 사용자와 상호 작용할 것들이 많은 경우
  • 렌더링이 완료된 이후에 상호 작용이 발생하게 하는 것이 사용자 경험에 유리하다.

페이지 마다 적합한 렌더링 방식을 채택하면 된다.
가령, 첫 번째 페이지 로딩에서는 SSR을 선택하고, 이 후에 다른 모든 페이지 로딩에는 CSR을 선택할 수 있다.