SPA(Single Page Application)
SPA는 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 앱이나 사이트를 말한다. 즉, 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링하는 방식이다.
전통적 링크 방식(MPA)
전통적인 링크 방식은 link tag로 동작하는 기본적인 웹페이지의 동작 방식이다.
아래 예제에서 <a href="/service.html">Service</a>와 같은 link태그를 클릭하면 href 어트리뷰트 값인 리소스 경로가 url의 path에 추가되어 주소창에 나타나고, 클라이언트가 해당 리소스를 서버에 요청한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SPA-Router - Link</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/service.html">Service</a></li>
<li><a href="/about.html">About</a></li>
</ul>
</nav>
<section>
<h1>Home</h1>
<p>This is main page</p>
</section>
</body>
</html>참고로, 전체적인 리소스(uri)구조는 사진과 같다.
서버는 화면을 그리기위한 완전한 리소스를 응답한다. 이를 서버 사이드 렌더링(SSR)이라고 한다. 브라우저(클라이언트)는 서버로부터 응답반은 html로 전체 페이지를 다시 렌더링하게 되므로 새로고침이 발생한다. 전체적인 그림은 아래와 같다.
SSR: 클라이언트가 서버에 매번 데이터를 요청해서 서버가 처리하는 방식. 즉 서버가 화면(view)를 그리는 주체가 된다.
장점
이 방식은 js의 도움없이 응답받은 html만으로 렌더링이 가능하며, 각 페이지마다 고유한 url이 존재하므로 history관리 및 seo대응에 아무런 문제가 없다.
단점
하지만 요청마다 중복된 리소스를 응답받아야 하고, 전체 페이지를 다시 렌더링하는 과정에서 새로고침이 발생해서 사용성이 좋지 않다.
Ajax방식(SPA)
전통적 링크 방식의 단점을 보완하기 위해 등장한 것이 ajax(Asynchronous JavaScript and XML)이다. ajax는 js를 이용해서 비동기적(asynchronous)으로 서버와 브라우저(클라이언트)가 데이터를 교환할 수 있는 통신 방식을 의미한다. 즉, 페이지 일부만 갱신하고도 동일한 효과를 볼 수 있도록 하는게 ajax이다.
아래 예제에서 <a href="/service">Service</a>와 같은 link태그의 어트리뷰트에 리소스의 경로대신 path를 사용하고 있다. 따라서 해당 태그를 클릭하면, path가 추가된 url이 서버로 요청된다. 하지만 ajax방식은 nav클릭 이벤트를 캐치하고 preventDefault메서드를 사용해 서버로 요청을 방지한다. 이후 path를 사용하여 ajax요청을 하는 방식이다.
id가 root인 div요소에 웹페이지 내용이 비어있는 것을 볼 수 있다. 요청된 리소스가 응답되면 클라이언트에서 해당요소에 응답받은 데이터를 기반으로 html을 생성해 추가한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SPA-Router - ajax</title>
<link rel="stylesheet" href="css/style.css" />
<script type="module" src="js/index.js"></script>
</head>
<body>
<nav>
<ul id="navigation">
<li><a href="/">Home</a></li>
<li><a href="/service">Service</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div id="root">Loading...</div>
</body>
</html>장점
이 방식은 불필요한 리소스의 중복요청을 방지하고, 페이지 전체를 리렌더링할 필요없이 필요한 부분만 갱신하므로 새로고침없이 빠른 페이지 로딩속도와 부드러운 화면으로 보다 향상된 ux를 구현할 수 있다.
단점
하지만 최초로 서버에 요청할 때 모든 데이터를 가져와서 상대적으로 최초 로딩이 MPA에 비해 느리다. 그리고 ajax요청은 주소창의 url을 변경시키지 않는다. 즉, 브라우저의 뒤로가기, 앞으로가기 등의 history관리가 동작하지 않는다. 때문에 새로고침을 해도 언제나 첫페이지가 로딩된다. 그리고 하나의 url로 동작하므로 seo이슈도 발생한다.
seo이슈: 웹 크롤러는 검색 엔진이 웹사이트의 콘텐츠를 수집한다. 이런 크롤러는 js를 실행시키지 않기 때문에 해당 사이트의 콘텐츠를 수집할 수 없다.
SPA프레임워크(React, Vue, Angular)의 SSR프레임워크
☑️ 참고
