SPA, MPA와 CSR, SSR, SSG
1. SPA와 MPA
예전에는 웹 사이트를 만들 경우, 여러 페이지를 만들 때는 각각에 해당하는 html 파일을 만들었다. a페이지를 보여주기 위해서는 a.html을 만들고 b페이지를 보여주기 위해서는 b.html을 만든다. a페이지를 보다가 b페이지를 보고 싶으면 페이지를 새로 렌더링 했다. 이렇게 각 페이지에 해당하는 html을 다 따로 만들어서 페이지를 접속할 때마다 새로 렌더링해서 새로 html 페이지를 보여주는 전통적인 웹 페이지 방식, 이를 MPA(Multi Page Application)이라고 한다. 그러나 점차 웹 사이트의 규모가 커지고 데이터가 많아지면서 페이지를 바꿀 때마다 페이지를 새로 렌더링하면 속도가 느려지는 등의 문제가 생겼다.
따라서 이런 문제를 해결하기 위해 요즘은 웹 사이트의 모든 페이지를 하나의 페이지에 담고 그 속에서 동적으로 화면을 바꾸는 방식이 등장했다. 이를 SPA(Single Page Application)이라고 한다. SPA 방식은 페이지는 하나지만, 다른 주소를 입력하면 다른 화면을 볼 수 있는 Routing을 이용한다. 대표적으로 React가 SPA 방식의 웹 페이지 제작을 돕는 라이브러리이다.
React의 내부를 살펴보면 index.html이라는 하나의 html만을 가지고 있다.
<!-- public/index.html -->
<html>
<body>
<div id="root"></div>
</body>
</html>
index.html의 <div id="root"></div>에 해당하는 부분에 모든 페이지가 담기는 것이다. index.html을 index.js 파일로 불러오면 index.js를 통해 웹 사이트의 각종 js 코드를 작성할 수 있다.
// src/index.js
React.DOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
2. CSR, SSR, SSG
SPA와 MPA는 웹 사이트에 페이지가 몇 개 있냐를 의미하는 개념이었다. 그리고, 페이지를 렌더링 하는 방식에도 종류가 있는데, 바로 CSR, SSR, SSG이다. CSR과 SSR은 웹 페이지의 렌더링을 클라이언트 쪽에서 하는가, 아니면 서버 쪽에서 하는가를 기준으로 나뉘는 방식이고, SSG는 아예 빌드가 완료된 페이지를 보여주는 방식이다.
2.1. CSR (Client Side Rendering)
Client Side Rendering의 약자로, 클라이언트 쪽에서 렌더링을 하는 방식이다. 클라이언트가 서버에게 웹 페이지를 요청하면, 서버는 아무 내용도 없는 빈 HTML과 번들링된 CSS, 자바스크립트 문서를 넘긴다. 브라우저는 CSS와 자바스크립트를 해석하여 DOM을 생성하고 페이지를 렌더링한다. 즉, 브라우저 쪽에서 사이트의 모든 코드가 다 들어있는 코드를 해석하여 빈 HTML을 채워 넣는 것이다. 페이지를 렌더링할 때 필요한 모든 정보를 모두 가져오기 때문에 SPA 구현에 유리하다.
페이지가 생성되고 난 뒤 페이지의 일부분만 새로 바꾸고 싶다면 서버에게 데이터만 받고 즉시 다시 렌더링할 수 있다. 따라서 서버측의 부담이 덜하고 웹페이지의 깜빡임도 없다. 그러나 페이지를 처음 렌더링할 때 모든 코드를 다 받아오기 때문에 초기 로딩 속도가 느리고, HTML 문서에 아무 내용이 없기 때문에 검색 엔진 최적화에도 불리하다는 단점이 있다.
2.2. SSR (Server Side Rendering)
Server Side Rendering의 약자로, 서버 쪽에서 렌더링을 하는 방식이다. 클라이언트가 요청을 하면 서버가 각 요청 URL마다 페이지를 렌더링하여 응답한다. 브라우저는 서버가 응답한 파일을 그대로 표시하고 스크립트를 수행하는 역할만 하는 것이다. 따라서 브라우저에는 이미 렌더링된 HTML 문서가 보여지기 때문에 초기 로딩 속도가 CSR에 비해 빠르고 검색 엔진 최적화에도 유리하다. 그러나 CSR보다 서버의 역할이 많기 때문에 서버 쪽의 부담이 크다는 단점이 있다.
2.3. SSG (Static Site Generator)
만약 웹 사이트의 컨텐츠가 변경될 일이 없는 경우, 굳이 매번 렌더링을 새로 일이 없다. 즉, 한 번만 생성한 이후에 필요할 때마다 로드하기만 하면 되는 것이다. 따라서 초기에 파일을 이미 다 빌드하고 빌드된 페이지를 보여주는 방식을 SSG라고 한다. 이미 빌드가 완료된 페이지를 서버에서 클라이언트로 전달만 하는 것이다. 그러나 컨텐츠를 변경하고 싶다면 빌드를 새로 해줘야 하기 때문에 컨텐츠를 변경할 일이 있는 사이트에는 부적합하다.
참고 자료
'CS > WEB & 네트워크' 카테고리의 다른 글
| [네트워크] HTTP (0) | 2023.01.08 |
|---|---|
| [네트워크] REST API (0) | 2022.12.11 |
| [WEB] 브라우저 렌더링과 DOM (0) | 2022.11.09 |
| [WEB] 브라우저 저장소 (0) | 2022.11.06 |
| [네트워크] OSI 모델과 TCP/IP 모델 (0) | 2022.10.28 |
