MPA / SPA

MPA

multi page application의 약자로 여러 페이지로 구성된 웹 어플리케이션이다.
사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식이다.

SPA

Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션 입니다.
브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다.
단인 페이지 어플리케이션(SPA)는 현재 웹개발의 트랜드로 볼 수 있고, react와 vue, 앵귤러와 같은 자바스크립트 프레임워크 등이 spa 방식을 가지고 있다.

SSR(Server Side Rendering) 개념, 동작과정, 장단점

Multi page application은 ssr방식을 채택합니다.
ssr이란 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링하는 방식이다.
먼저 클라이언트가 초기 화면을 로드하기위해 서버에 요청을 보낸다.
그럼 서버는 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고 css까지 모두 적용해서 렌더링 준비를 마친 html과 js코드를 브라우저 응답으로 전달한다.
브라우저에서는 바로 전달 받은 페이지를 띄운 후, 브라우저가 js코드를 다운로드하고 html에 실행 시킨다.

이미지의 세모를 네모로 변경해야 한다면, 세모 뿐만 아니라 동그라미, 마름모까지 모두 서버로부터 다시 다운받아 온다. 이러한 이유로 요청을 보내고 응답을 받으면 새로고침되어 화면이 깜빡인 후에 표시된다.

서버사이드 렌더링을 채택하는 멀티 페이지 어플리케이션은 화면을 구성하는 각각의 페이지가 있기 때문에 seo(검색엔진최적화)의 유리한 장점이 있다.
모든 데이터가 이미 html에 담겨친채로 브라우저에 전달되기 때문에 검색엔진 최적화에 유리하다.
서버로부터 화면을 렌터하기 위한 필수적인 요소를 먼저 가져오기 때문에 이후에 설명할 클라이언트 사이드 렌더링보다 초기 로딩 속도가 빠르다.

하지만 매번 페이지를 요청할 때마다 새로고침이 되어 사용자 경험이 다소 떨어지며 서버측 부하가 증가한다.

CSR(Client Side Rendering) 개념, 동작과정, 장단점

spa(싱글 페이지 어플리케이션)은 렌더링 방식으로 crs를 채택한다.
클라이언트 사이드 렌더링이란 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링하는 방식이다.
과정을 보면
클라이언트에서 초기화면을 로드하기 위해 서버에 요청을 보낸다.
서버는 화면에 표시하는 데 필요한 완전한 리소스의 응답한다.
여기서 crs이 ssr의 방식과 다른 점은 모든 js파일을 다운받아야 하기 때문에 초기 로딩 시간이 더 오래 걸린다는 것이다.

하지만 crs를 이전과 같이 서버에 요청을 보내면 변경된 부분인 세모와 관련된 리소스만 응답하여 화면이 깜빡이지 않고 수정된 데이터만 변경되어 표시된다.

그렇기에 crs는 빠른 속도와 서버 부하 감소가 장점이며, 깜빡임이 없기 때문에 사용자 친화적이다.

렌더링 방식 선택기준