웹 어플리케이션을 페이지 구성하는 방법은 여러가지가 있다. 하나의 페이지로 다양한 상호작용으로 작동하는 Single Page Application과 다양한 페이지를 구성하는 Multiple Page Application가 대표적이다.
두 구성의 어플리케이션에 대해 알아보고 어느 서비스에서 해당 구성을 사용하면 좋을지 알아보자. 해당 포스트에는 SSR과 CSR에 대한 지식이 나오므로 해당 지식을 잘 모른다면 이전 포스트를 살펴보고 오는 것이 좋을 것 같다.
[Web/frontEnd] - Server Side Rendering(SSR)과 Client Side Rendering(CSR)
Multiple Page Application(MPA)
Multiple Page Application, 즉 MPA는 말 그대로 다수의 페이지를 사용하는 어플리케이션이다. MPA는 SSR(Server Side Application) 방식으로 렌더링한다. 그렇기 때문에 새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다. 페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.
MPA의 특징
1. 첫 로딩이 짧다.
SSR 방식으로 렌더링을 하기 때문에 서버에서 렌더링이 된 HTML을 다운받아 바로 렌더링한다. 그렇기에 빠른 첫 로딩 속도를 가지고 있다. 하지만 javascript가 다운로드 되기 전까지는 웹이 동작하지는 않는다.
2. SEO 관점에서 좋다.
이 또한 SSR 방식을 사용하기 때문에 크롤러가 데이터를 색인하기 좋아 SEO관점에서 좋다.
3. 새로운 페이지 요청 시 흰 화면이 출력되어 깜빡거린다.
SSR은 새로운 페이지를 요청할 때 새롭게 렌더링 된 정적 리소스를 다운받고 이를 한번에 출력한다. 그렇기에 기존 HTML이 대체되며 흰 화면이 중간에 출력되어 깜빡거려 유저 경험이 좋지 않다.
4. 서버의 부하
서버에서 페이지의 렌더링을 하기 때문에 렌더링이 많다면 서버에 부하를 준다.
Single Page Application(SPA)
Single Page Application은 하나의 페이지로 구성된 어플리케이션을 말한다. SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다. 그렇기에 유저의 요청을 받아 클라이언트에서 렌더링하여 출력한다. 추가적인 데이터만 서버에서 가지고 온다.
이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다.
필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.
Angular, React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행하고 있다.
SPA의 특징
1. 첫 로딩이 비교적 길다.
CSR 방식으로 렌더링하기에 첫 로딩에서 HTML,CSS, javascript를 다운받아 온다. 그렇기에 SSR에 비해 긴 첫 로딩 시간을 가진다.
2. SEO 관점에서 불리하다.
CRS은 javascript를 통해 동적으로 페이지을 구성한다. 그렇기에 검색엔진의 크롤러가 해당 어플리케이션의 데이터 색인이 힘들다.
<html>
<head>
<title>Single Page Application</title>
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>위 코드가 크롤러가 마주하는 SPA의 html이다. 데이터 색인이 힘들다.
3. 자연스러운 사용자 경험 (UX)을 제공한다.
javascript로 동적인 구성이 가능하기에 유저와 상호 작용이 매우 유리하다. 더해서 컴포넌트 재사용이 가능하기 때문에 클라이언트 성능면에서도 유리하다.
4. 서버의 부하 최소화
서버의 연산을 클라이언트로 분산하여 서버의 부하를 줄일 수 있다.
5. 보안 이슈가 있을 수 있다.
SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 로컬 스토리지말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다. 그렇기에 다양한 보안 이슈가 존재한다.
6. SPA가 CSR은 아닐 수 있다.
'web > webApplication' 카테고리의 다른 글
| Server Side Rendering(SSR)과 Client Side Rendering(CSR) (1) | 2022.11.18 |
|---|