인터넷의 등장과 HTML
- 출처 : ChatGPt
- 출처 : Youtube- 신세한탄의 CSR&SSR
- 출처 : Youtube- [프론트가 이정도는 알아야함] SPA 등장 배경과 CSR
- 출처 : Youtube- [프론트가 이정도는 알아야함] next.js로 살펴보는 SSR
Html은 인터넷이라는 고속도로에 하나의 건물이 만들어진 것과 같다. 하나의 문서인 Html에는 설립된 건물의 설계가 그쳐진 도면과 같다. 사용자가 인터넷을 통하여 해당 건물에 진입하면 서버는 그 건물에 대한 설계도면을 전달해주었다. 그렇게 사용자는 건물 안으로 들어갈 수 있게 되었는데, 건물안에 각각의 방으로 진입하기 위해서는 새로운 도면을 받아야 했었다. 이러한 초기의 통신 방식을 MPA라고 비유를 들어서 설명할 수 있다.
1) MPA와 SSR
이와 같이 새로운 경로로 진입하면 매번 완성된 Html문서를 받아오는 방식을 SSR(Server Side Rendering)이라고 한다. 그리고 이렇게 완성된 각각의 문서를 통해 구성된 어플리케이션을 MPA(Multiple Page Application)라고 부른다. 이렇게 구성되는 웹 어플리케이션이 전통적인 방식의 구성이다.
2) SPA와 CSR - 대표적인 사례 : 리액트
최근에는 하나의 Html 문서를 통해 구동되는 웹 어플리케이션이 2010년 도입되었다. 현재적 시점에서 매번 새로운 html 문서를 요청해야하는 MPA 방식에 비해서 SPA는 점차적으로 인기를 얻고 있다. 이는 초기 로딩 속도가 느리지만 한 번 받아온 이후에는 빠르게 클라이언트에서 동적으로 DOM을 생성하여 대응하기 때문이다. 반면에 매번 새로운 Html 문서를 요청했던 MPA는 서버에 그만큼 많은 부하를 주었다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/logo_blackB.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>MUSE-O</title>
<script defer="defer" src="/static/js/main.1e0e4425.js"></script>
<link href="/static/css/main.10d20c60.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>SPA와 CSR
SPA 방식에서 받아오는 html은 네트워트 탭에서 확인할 수 있는 해당 문서가 전부이다. 이후의 모든 DOM은 연결되어 있는 script 태그의 경로를 통해서 동적으로 클라이언트 측에서 렌더링을 진행하며, 이때 필요한 데이터를 서버에 그 때에 따라서 요청할 뿐이다. 즉 클라이언트에서 렌더링을 담당하고, 서버는 필요한 데이터를 제공하는 역할을 수행하는 것이다.
한 마디로 SPA는 초기 로딩에 필요한 정적 컨텐츠를 받아오고, 이후의 변경되는 컨텐츠는 그때 그때에 따라서 비동기적으로 처리하며 동적 렌더링을 수행한다는 점이다.
MPA와 SSR
반면에 MPA는 여러 페이지로 구성되어 있으며, 각각의 페이지에 서버로부터 받아온 데이터를 모두 정적 컨텐츠로 구성한다는 점이다.
SEO(검색엔진최적화) - SPA, MPA
html에 모든 내용이 정적 컨텐츠로 기록되어 있다는 것은 검색엔진이 읽을 수 있는 자료가 전부 기록되어 있다는 것이다. 반면에 초기로딩에 필요한 정적컨텐츠만 기록되어 있고 이외의 자료는 동적 컨텐츠로 기록하는 SPA에는 검색엔진이 읽을 수 있는 자료가 없다라는 점에서 차이가 발생된다.
구글의 검색엔진은 JS 언어를 읽을 수 있도록 개발되어지고 있기에, SPA로 구성된 문서도 읽어낼 수 있지만, 이외의 검색엔진은 JS 언어를 읽을 수 없기에 검색 부분에 있어서는 SPA가 MPA에 비해서 부족한 측면이 있다. 그러나 이부분이 단점인 것은 아니다. 왜냐하면 유저와의 상호작용이 많고, 대부분이 고객 개인 정보로 이루어진 페이지라면, 검색 엔진에 노출될 필요가 없기 떄문이다.
반면에 회사 홈페이지와 같이 누구에게나 항상 같은 내용을 보여줘야 한다면, 내용의 변화가 자주 있지 않는다면, MPA를 통해서 홈페이자가 구성되는 것이 이점일 수 있다.
그런 점에서 커머스와 같이 동적으로 시간에 따라 유동적인 데이터를 다루는 현재적 시점의 웹 서비스의 측면에서는 검색엔진에는 불리하더라도, SPA가 인기를 얻고 있는 것이다.
TTV와 TTI
TTV(Total Time to View)와 TTI(Time to Interactive)는 모두 웹 페이지의 사용자 경험을 측정하는 데 사용되는 지표인데, TTV는 페이지가 완전히 로드되는 데 걸리는 시간을 측정하고, TTI는 실제로 사용자가 해당 웹 서비스를 이용할 수 있는 상태로 전환되는 데 걸리는 시간을 측정하는 지표이다.
특히 TTI는 페이지가 로드되고 브라우저에서 JavaScript 및 기타 리소스가 실행되고 구문 분석되는 데 필요한 시간을 나타내는데, TTI가 느릴수록 사용자는 페이지와 상호작용하기 전에 기다려야 하는 시간이 더 길어지므로 사용자 경험이 나빠질 수 있음을 말한다.
CSR은 초기 로드 시간이 오래 걸릴 수 있지만, 페이지가 로드된 후 사용자와 상호작용하는 데 걸리는 시간이 비교적 빠르다는 것이 특징이다. JS를 통해서 한번에 내려받은 script 태그의 경로를 통해서 클라이언트에서 렌더링을 진행하기 때문이다. 반면 MPA는 초기 로드 시간이 비교적 빠를 수 있지만, 각 페이지 전환이 발생할 때마다 전체 페이지를 다시 로드해야 하므로 TTI가 느리다는 것이 특징이다.
무엇이 더 나은 것이냐?
이러한 질문을 하는 것 자체가 문제다. 왜냐하면, 웹 서비스의 목적과 성격이 다르기 때문이다. 웹 서비스를 개발하는 측면에서 각각의 필요한 목적과 성격에 따라서 어떠한 방식으로 프로젝트를 구성할 것인가를 채택하는 것이 올바른 관점이다.
초기로딩이 긴 CSR, NEXT.js의 등장
이러한 부분 때문에 CSR+SSR 방식이 고려되었다. 불편하다는 것은 새로운 기술이 등장한다는 것이다. 그것이 바로 next.js 이다.
