📌 MPA vs SPA
✔️ MPA
MPA(Multi Page Application)는 여러 페이지로 구성된 웹 애플리케이션을 말한다.
인터렉션이 발생할 때마다 서버로부터 새로운 HTML을 받아 해당 링크로 이동하여 페이지 전체를 렌더링하는 전통적인 웹페이지 구성 방식이다.
✔️ SPA
SPA(Single Page Application)는 단일 페이지로 구성된 웹 애플리케이션을 말한다.
브라우저에 최초에 한 번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 바인딩하는 웹페이지 구성 방식이다. Ajax 통신을 통해 json이라는 api 통신 방식을 사용하여 페이지 구성에 필요한 데이터를 서버로부터 내려받는다.
📌 SSR
Server Side Rendering의 줄임말으로 서버에서 웹 페이지를 렌더링하는 방식을 말한다.
- MPA(Multi Page Application)는 SSR(Single Side Rendering) 방식을 채택한다.
- SSR 방식은 백엔드 서버 내부에 프리젠테이션 계층(Web Server)이 분리되지 않고 물리적(Web Server+WAS)으로 함께 존재한다.
- 서버에서 웹페이지의 렌더링이 완료(렌더링 시점이 서버)되어 클라이언트(사용자)가 파일을 내려받을 때까지 사용자는 별도의 작업을 수행할 수 없다.
✔️ SSR 기반의 웹 애플리케이션
SEO(Search Engine Optimization), 검색 엔진 최적화
SSR 기반의 웹 애플리케이션의 경우, 페이지 요청 시 페이지를 구성하는 각각의 페이지가 모두 존재하기 때문에 별도의 색인 작업이 필요 없어 검색 엔진 최적화가 필요한 사이트를 개발할 때 SSR 방식의 웹 애플리케이션을 채택한다.
초기 로딩이 빨라야 하는 웹사이트(뉴스기사 사이트 등)
서버로부터 화면 렌더링을 마친 상태로 웹페이지를 사용자에게 전달하기 때문에 CSR 기반의 웹 애플리케이션보다 초기 로딩이 빠르다.
그러나 서버에서 모든 렌더링이 수행된다는 점에서 서버에 부하를 줄 수 있다.
또한 매번 페이지를 요청할 때마다 새로고침되기 때문에 사용자의 편의성은 다소 떨어진다.
📌 CSR
Client Side Rendering의 줄임말으로 클라이언트에서 웹 페이지를 렌더링하는 방식을 말한다.
- SPA(Single Page Application)는 SSR(Single Side Rendering) 방식을 채택한다.
- 별도의 프론트엔드 서버가 존재하며 백엔드 서버와 물리적으로 구분되어있다.
- 웹페이지를 구성하는 골격은 프론트엔드 서버에서 만들고 백엔드 서버에 빈칸을 채울 JSON 형식의 데이터를 AJAX 통신을 통해 요청한다. 응답받은 데이터(JSON) 파일과 웹페이지를 구성하는 프레임을 클라이언트에게 전달한다.
- 클라이언트는 파일을 내려받아 렌더링을 수행하며(렌더링 시점이 클라이언트), 최초 렌더링이 완료된 후, 페이지의 부분적인 변경이 요청되면 해당 부분에 필요한 JSON 데이터만을 요청하여 새로고침을 수행하지 않고 웹페이지를 부분적인 변경을 수행한다.
- 비동기적 통신 방식(AJAX)을 통해 부분적인 렌더링이 수행되더라도 사용자는 다른 작업을 수행할 수 있다.
✔️ CSR 기반의 웹 애플리케이션
서버의 사양이 높지 않을 경우
렌더링의 시점이 클라이언트에서 일어나기 때문에 서버의 부하가 적다. 때문에 서버의 사양이 좋지 않을 경우 CSR 기반 웹 애플리케이션 방식을 채택한다. 검색 엔진 최적화가 필요한 경우를 제외하고는 일반적으로 CSR 기반의 웹 애플리케이션 개발 방식을 채택한다.
사용자와의 인터렉션이 활발할 경우
사이트에서 사용자와 상호 작용이 빈번히 일어나는 경우 실시간 렌더링이 가능한 CSR 기반의 웹 애플리케이션을 채택한다. 그러나 모든 렌더링의 부하가 클라이언트 쪽에 집중되기 때문에 렌더링 속도가 SSR 방식보다 느리고, 사용자 PC의 사양에 따라서 경험이 달라질 수 있다.
📌 AJAX
Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법을 말한다.
CSR 방식에서 사용되는 AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것이다. 검색을 하기 위해 구글에 접속하면 다음과 같은 웹 페이지를 볼 수 있다.
검색창에 한 글자를 입력할 때마다 해당 글자로 시작하는 단어들을 서버로부터 받아와 그 바로 아래 추천검색어로 보여준다.
다시 말해, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링되며, 여기에서 바로 비동기적 통신 AJAX가 사용된다.
📌 AJAX의 핵심 기술
AJAX를 구성하는 핵심 기술은 JavaScript, DOM, Fetch이다.
전통적인 웹 애플리케이션에서는 <form> 태그를 이용해 서버에 데이터를 전송해야만 했다. 또한 서버는 요청에 대한 응답으로 새로운 웹 페이지를 제공해 주어야 했다. 다시 말해, 클라이언트에서 요청을 보내면 매번 새로운 페이지로 이동해야만 했다.
<form>
<label>Name:</label>
<input type="text" />
<button>Submit</button>
</form>
✔️ XHR
XMLHttpRequest의 약자로 전통적인 웹 애플리케이션 통신 방식의 단점들을 개선하기 위해 등장했다.
// XMLHttpRequest를 사용
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');
xhr.onreadystatechange = function(){
if(xhr.readyState !== 4) return;
// readyState 4: 완료
if(xhr.status === 200) {
// status 200: 성공
console.log(xhr.responseText); // 서버로부터 온 응답
} else {
console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
}
}
xhr.send(); // 요청 전송XHR을 통해 페이지를 새로고침하지 않고서도 서버와 데이터를 받아오는 등의 인터렉션이 가능하게 되었다. 그러나 Cross-Site 이슈, 코드의 복잡성 등의 문제가 있어 이를 보완하면서도 더 가벼운 Fetch가 등장하게 되었다.
✔️ Fetch의 등장
Fetch가 등장하면서 XHR의 문제점들을 개선하면서도 좀 더 간편하게 서버로부터 필요한 데이터를 받아올 수 있게 되었다.
// Fetch를 사용
fetch('http://52.78.213.9:3000/messages')
.then (function(response) {
return response.json();
})
.then(function (json) {
...
});Fetch를 통해 사용자가 현재 페이지에서 작업을 수행하는 동안 서버와 별도의 통신이 가능하다. 즉, 브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라, 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용한다.
✔️ JavaScript의 DOM
또한 자바스크립트에서는 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만을 가져와 DOM에 적용시켜 새로운 페이지를 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있게 되었다.
📌 AJAX의 장단점
✔️ AJAX의 장점
- 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있다.
이전에는 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링을 할 수 있었다. 그러나 AJAX를 사용하면 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트하여 렌더링 할 수 있게 되었다. - XHR 표준
표준화된 방법 이전에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화되면서부터 브라우저에 상관없이 AJAX를 사용할 수 있게 되었다. - 부분 렌더링과 사용자 친화적인 애플리캐이션의 개발이 가능해졌다.
유저 중심 애플리케이션 개발 AJAX를 사용하면 필요한 일부분만 렌더링하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들 수 있다. - 더 작은 대역폭 대역폭
네트워크 통신 한 번에 보낼 수 있는 데이터의 크기 이전에는 서버로부터 완성된 HTML 파일을 받아와야 했기 때문에 한 번에 보내야 하는 데이터의 크기가 컸었다. 그러나 AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML 등) 보내면 되기 때문에 비교적 작은 데이터의 통신이 가능하게 되었다.
✔️ AJAX의 단점
- Search Engine Optimization(SEO)에 불리하다. (크롤링)
AJAX 방식의 웹 애플리케이션은 한 번 받은 HTML을 렌더링 한 후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려 낸다. 따라서, 처음 받는 HTML 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많다. 검색 사이트에서는 전 세계 사이트를 돌아다니며 각 사이트의 모든 정보를 긁어와 사용자에게 검색 결과로 보여준다. 그런데 AJAX 방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵다. - 이전 상태를 기억하지 않는다.
뒤로가기 버튼 문제 일반적으로 사용자는 뒤로가기 버튼을 누르면 이전 상태로 돌아갈 거라고 생각하지만, AJAX에서는 이전 상태를 기억하지 않기 때문에 사용자가 의도한 대로 동작하지 않는다. 따라서 뒤로가기 등의 기능을 구현하기 위해서는 별도로 History API를 사용해야 한다.
댓글