MPA (Multi Page Application)
MPA 란 SPA와 대조적인 용어로 여러 개의 페이지로 이루어진 어플리케이션을 뜻한다. MPA는 Server Side Rendering 방식으로 뷰를 만든다. 새로운 페이지를 요청할 때마다 서버에서 렌더링된 자원(HTML, CSS, javscript)을 모두 받는다. 따라서, 페이지 이동/갱신이 있을 때마다 전체 페이지를 다시 렌더링한다.
SPA (Single Page Application)
SPA 란 한 개의 페이지로 이루어진 어플리케이션을 말한다. Vue와 React는 대표적인 SPA 프레임워크로 Client Side Rendering 방식으로 화면을 구성한다. 최초에 HTML, CSS, javscript을 받고, 사용자의 동작에 따라 부분 요소를 다시 렌더링한다. (깜빡거리지 않고, 해당 부분만 변화한다.)
SSR과 CSR
SSR (Server Side Rendering)
서버 쪽에서 렌더링한 후, 그 결과를 클라이언트에 전달하는 방식이다. 아래와 같은 단계로 진행된다.
- 사용자가 웹 사이트에 요청을 보낸다.
- 서버는 즉시 렌더링이 가능한 HTML 파일을 만든다.
(여기서 즉시 렌더링이 가능한 HTM이란, HTML 파일 내 데이터가 채워진 상태를 말한다.)- 클라이언트는 서버로부터 HTML을 받아, 즉시 렌더링한다. 이 단계에선 javascript를 받기 전 상태라 조작은 불가능하다. 화면을 볼 수만 있다.
- 클라이언트는 javascript를 다운 받는다. 이 때, 사용자의 조작을 기억한다. (동작은 하지 않음!)
- 클라이언트는 javascript를 실행하고, 웹 페이지는 상호작용이 가능해진다.
SSR 특징
- 완성된 HTML을 받기 때문에 SEO (Search Engine Optimization)에 유리하다.
- 해당 페이지의 자원만 서버로부터 받기 때문에 첫 로딩 속도가 빠르다. (첫 로딩 속도란 웹 페이지에 처음 진입했을 때를 말한다. 이후 페이지 이동이 있다면 CSR에 비해 느리다.)
- 페이지를 이동하거나 갱신할 때마다 다시 렌더링하기 때문에 화면이 깜빡거린다.
- 생김새가 비슷한 화면이 여럿 있다면 성능 손해가 발생한다. (부분 화면만 교체가 불가능하기 때문)
CSR (Client Side Rendering)
클라이언트에서 렌더링하는 방식이다. 아래 단계로 진행된다.
- 사용자가 웹 사이트에 요청을 보낸다.
- CDN이 HTML과 javascript를 클라이언트로 보낸다.
- 클라이언트는 HTML과 javascript를 받고, 실행한다. 이 때, data 호출 API가 있다면 서버로부터 응답을 기다리고, 해당 영역은 placeholder로 대체한다. 이 단계부터 사용자는 data를 제외한 부분적인 화면을 볼 수 있고, 상호작용할 수 있다.
- 서버로부터 응답이 오면 그 결과를 바탕으로 placeholder를 대체한다. 이제 웹 페이지는 정상적인 상호작용이 가능해진다.
CSR 특징
- 자연스러운 사용자 경험을 줄 수 있다. (깜빡거림이 없다.)
- 현재 페이지의 필요한 자원만 받기 때문에 합리적이다.
- 서버의 부담을 줄일 수 있다.
- 생김새가 비슷한 화면을 재사용할 수 있어 최적의 성능을 낼 수 있다.
- 모바일과 동일한 API를 사용할 수 있기 때문에, 경제적이다.
필기맨