[Web] SPA/MPA, CSR/SSR

SPA

Single Page Application, 하나의 페이지에서 JS 앱을 실행시켜 이를 이용하여 HTML을 구성하고 서버에 요청을 보내는 등 애플리케이션의 기능을 제공

MPA

Multi Page Application, 사용자 요청 시마다 각각의 HTML 파일을 보내주어서 브라우저가 이를 다시 로드하는 전통적인 웹 애플리케이션 방식

 

CSR

Client Side Rendering, Client 즉 브라우저에서 JS를 이용하여 HTML을 동적으로 렌더링하는 방식

빠르고 부드러운 UX 경험을 제공하며 서버에 부하가 적은 장점

초기 로딩 속도(JS 파일을 초기에 전부 로딩)가 느리고 SEO에 불리한 단점

 

- SEO?

 

Search Engine Optimization, 검색 엔진에 웹 사이트가 노출될 때는 해당 페이지의 메타 데이터와 HTML 팡리을 기준으로 검색 엔진의 알고리즘에 들어가게 되는데, CSR의 경우 해당 HTML 데이터들이 처음 로드 시에 바로 나타나지 않으므로 검색 엔진에 불리하다. 검색 엔진에 따라 JS를 실행시켜보는 것도 있지만, 그렇지 않은 것도 있음.

SSR

Server Side Rendering, 클라이언트가 요청을 보내면 서버에서 데이터 처리 후 HTML을 생성하여 클라이언트로 보냄

초기 로딩 속도가 빠르고 SEO가 유리한 장점

다만 요청 시마다 HTML 파일 자체를 계속 보내야 하므로 서버에 부하가 올 수 있는 단점은 있음

 

SPA + CSR

일반적인 React 기반의 애플리케이션. Netflix, Gmail, Facebook 등

빠르고 부드러운 UX이지만 SEO에 불리함

 

SPA + SSR

SEO에 불리하다는 CSR의 단점을 보완하기 위함.

React기반 -> Next.js

사실 이 글을 쓰는 이유기도 함

MPA + SSR

서버에서 HTML 파일을 생성하여 보내주고, 여러 개의 페이지를 사용하는 전통적인 웹 서비스