SPA와 MPA / SSR과 CSR / AJAX

MPA(Multi Page Application)와 SSR(Server Side Rendering)

전통적인 웹사이트는 모두 MPA(Multi Page Application)이었다. 어떤 페이지에 접속하려면 서버에서 그 페이지의 html을 보내준다. 페이지마다 각각의 html이 있고 서버에서 렌더링 연산을 담당하고 페이지가 완성이 되면 응답한다. 따라서 페이지를 새로고침하거나 이동하면 페이지 전체가 렌더링된다. MPA는 멀티 html을 서버에서 제공해주는 SSR방식이다.

SSR방식의 MPA의 장점은, 초기 로딩이 매우 짧다는 것이다. 서버에서 렌더링이 완료된 상태로 파일을 주고, 자바스크립트 파일 다운로드가 완료되지 않았어도 html이 보여지기 때문에 사용자가 대기하는 시간이 줄어든다. 또한 검색 엔진 최적화(SEO)에 좋다. 구글, 네이버, 다음같은 검색엔진이 웹 페이지 정보를 원활하게 수집할 수 있다. 검색엔진이 자바스크립트를 실행하지 못하고 url과 html의 태그 및 링크 등을 분석하기 때문에 SSR방식이 크롤링하기에 적합하다. CSR방식 SPA의 html은 거의 비어있다.

단점도 존재한다. 새로운 html을 렌더링이 완성된 상태로 불러오므로 새로운 페이지를 띄울 때마다 깜빡임이 발생하고, 중복되는 부분도 처음부터 다시 렌더링을 하니 비효율적이다. 또한 서버에서 렌더링까지 담당하면 수많은 사용자가 동시에 접속을 하려고 하면 과부하가 발생할 수 있다. 
현대에 웹페이지와 사용자의 인터랙션이 많아지면서 이러한 단점들을 보완하고자 SPA가 탄생했다.

 

SPA(Single Page Application)과 CSR(Client Side Rendering)

html을 처음에 한 번만 받아오고 뷰 렌더링을 브라우저가 담당하도록 한다. 그리고 html문서에 내용이 가득 찬 것이 아니라, 자바스크립트가 html요소를 동적으로 생성한다. 서버로부터 완전한 새 페이지를 불러오는 것이 아니라, 필요한 부분에 대한 데이터만 받아오고 브라우저가 부분적으로 업데이트한다. 

브라우저가 서버에 요청을 보내면 서버는 웹 페이지의 골격이 될 단일 페이지(Single Page)와 자바스크립트를 클라이언트에 보낸다. 클라이언트가 웹 페이지를 받으면 자바스크립트를 실행하여 완전히 렌더링된 페이지로 바꾼다. 웹 페이지에 필요한 데이터가 데이터베이스에 저장되어 있는 경우, Fetch API를 사용하여 브라우저가 데이터베이스에서 가져와 렌더링한다. 다른 페이지로 이동하고 싶은 경우에는 SSR처럼 서버가 웹페이지를 또 보내주는 것이 아니라, 브라우저가 요청한 경로(주소창의 url값)에 따라 라우팅 시스템을 통해 새롭게 렌더링한다. 이 때 보이는 웹페이지 파일은 처음에 서버로부터 받았던 골격 파일과 동일하다.

따라서 기술적으로는 한 페이지만 존재하지만, 사용자가 느끼기에 여러 페이지가 존재한다. React Router같은 라우팅 시스템이 브라우저 주소창의 경로에 따라 알맞은 페이지를 보여준다. 브라우저의 History API를 사용하여 주소창의 값만 변경하고, 기존의 페이지를 유지하며 라우팅 설정에 따라 또 다른 페이지를 보여준다.

SPA의 장점은 필요한 부분만 달라지기 때문에 사용자 입장에서는 더욱 자연스러움을 느껴 사용자 경험(UX)이 좋아진다. SSR에서 발생하는 깜빡거림도 사라진다. 또한 템플릿 연산을 클라이언트가 하기 때문에 특히 SNS와 같은 사용자와 인터랙션이 많은 페이지에서 서버의 부담이 줄어든다. 컴포넌트화를 할 수 있어 중복된 부분은 재사용하고 UI수정도 용이하다.

SPA의 단점도 있다. 브라우저는 처음에 html파일을 읽고, 그 안에 있는 script태그의 자바스크립트 파일을 읽을텐데 자바스크립트가 html요소를 생성하고 많은 일을 하기 때문에 파일의 크기가 크다. 자바스크립트 파일이 무거워서 불러오는 시간이 오래 걸릴 것이고 그렇기 때문에 첫 로딩 시간이 길어진다.

또한 MPA의 장점인 검색 엔진 최적화(SEO)가 SPA의 단점이다. 검색 엔진은 url과 html파일을 중점적으로 검색하는데, 자바스크립트로 html 요소를 동적으로 생성하는 방식인 SPA의 html 파일은 대부분 비어있을 것이다. 웹 페이지에 대한 자료 수집이 충분히 되지 않아 검색 노출이 되지 않을 것이다. 구글 검색 엔진은 다른 검색 엔진과 달리 검색 엔진에서 자바스크립트를 실행하는 기능이 탑재되어 있어 제대로 페이지를 크롤링하기도 하지만 모든 페이지에 대해서 그런 것은 아니다. SPA에서도 검색 엔진이 정보를 원활하게 수집할 수 있도록 SEO가 발전하고 있지만 아직은 불리하다.

 

정리하면, SSR과 CSR의 차이점은 렌더링되는 위치이다. SSR은 서버에서 렌더링이 되고 CSR은 클라이언트인 브라우저에서 렌더링이 된다. CSR은 페이지를 이동할 때마다 새로고침을 하지 않고 동적으로 라우팅을 관리한다.
리액트는 SPA를 지원하고 CSR방식으로 동작한다.

 

AJAX(Asynchronous JavaScript And XML)

AJAX는 웹 개발 기법이다. JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술들을 이용하는 웹 개발 기법이다. 자바스크립트를 이용해서 서버와 브라우저가 비동기적으로 데이터를 주고받을 수 있는 통신 기능이다. AJAX의 가장 큰 특징은 웹 페이지에 필요한 부분의 데이터만 비동기적으로 받아와 화면에 그려낸다는 점이다.

 

옛날 2000년대 네이버 페이지이다. 사용자가 보고 버튼을 클릭하거나 글자를 입력하는 것 말고는 상호작용이 제한적이다.

 

현대의 네이버이다. 검색어를 입력하면 연관검색어가 뜨며 화면이 동적으로 변한다. 해당 글자로 시작하는 단어들을 서버로부터 받아오는 것이다. 버튼을 클릭하면 페이지의 일부분이 바뀐다. 비동기적으로 데이터를 서버에서 받아와 부분적으로 렌더링 하는 것이다. 새로운 전체 페이지를 가져오지 않는다. 

이러한 기법을 AJAX라고 한다. 

AJAX의 X가 XML를 뜻하는 바와 같이 원래는 XHR(XMLHttpRequest)을 이용해서 비동기 처리를 하는 기술이었다. 이름대로만 하면 XML파일만을 주고받을 수 있을 것처럼 보이는데 오늘날은 XML보다 가볍고 대부분의 프로그래밍 언어에서 사용할 수 있는 JSON을 데이터 포맷으로서 사용한다.

더불어 현대에는 XHR가 아닌 Fetch 함수로 비동기 처리를 한다. Fetch 함수도 XMLHttpRequest와 마찬가지로 HTTP 요청 전송 기능을 담당하는, 브라우저에서 제공하는 Web API이다. XHR보다 사용법이 간단하고 콜백패턴이 아닌 프로미스를 지원하고 크로스브라우징이 발생하지 않아 Fetch를 사용한다.

이처럼 AJAX는 더이상 XML과 XHR을 사용하지 않고, 이름과 관계없이 자바스크립트를 사용하여 브라우저와 서버가 비동기로 데이터를 주고받아 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 총칭한다.

 

장점

• CSR이 가능하다
• 더욱 빠르고 더 많은 상호작용이 가능한 SPA를 만들 수 있다
• 대역폭이 작다. 서버가 완성된 html을 보내야 했기 때문에 한 번에 보내는 데이터의 크기가 컸다. AJAX에서는 필요한 데이터를 텍스트 형태(JSON, XML)로 보내면 되기 때문에 비교적 데이터의 크기가 작다.

단점

• SEO에 불리하다
• AJAX는 이전 상태를 기억하지 않기 때문에 뒤로가기  버튼을 눌러도 의도한대로 동작하지 않는다. 이를 보완하기 위해 History API를 사용하거나 이를 사용한 라우팅 시스템을 이용해야 한다.

 

AJAX와 SPA와 CSR

그래서 AJAX와 SPA와 CSR의 관계가 어떻게 될까? 특징이 비슷해서 용어를 사용하기에 혼동이 있을 것 같다. AJAX는 '생체인식기술'처럼 기술의 이름이다. 지문, 얼굴, 홍채 인식 등 방법이 여러 가지 있다. 생체인식기술을 통해서 생체인증 로그인이 가능한 어플리케이션을 만들 수 있다. 아이디와 비밀번호를 기억하고 입력해야하는 불편함을 덜어주고 분실, 도용 위험이 적어 사용자의 편의성이 증진된다. 완전한 비유같진 않다. 참고만 하자 🙃

기술	AJAX	생체인식기술
방법	XMLHttpRequest, Fetch, Axios	지문인식, 얼굴인식, 홍채인식
결과물 및 기대효과	SPA CSR AJAX를 통해 비동기적으로 데이터를 가져올 수 있기 때문에 CSR을 가능하게 한다. 사용자가 다른 작업을 하면서 서버로부터 데이터를 가져오고 브라우저에서 화면의 일부만 업데이트하여 렌더링 할 수 있다.  사용자와 웹페이지 사이의 상호작용이 늘어나고 지연이 줄어 사용자 경험이 증진된다.	생체인식로그인 어플리케이션 생체인식 로그인 서비스별로 아이디 비밀번호를 기억할 필요없고, 로그인할 때 글자를 입력하지 않아도 된다. 손가락을 대거나 화면을 응시하는 것만으로 로그인이 가능하여 사용자 경험이 증진된다.