개발 패러다임이 변화하면서 최근에 많이 사용되는 SPA(Single Page Application)에서는 웹 페이지에 포함된 적은 양의 HTML로 DOMContentLoaded, load 이벤트가 일찍 발생할 수 있으나, 이벤트가 발생한 이후에도 수많은 스크립트 실행으로 인해 여전히 "느린 로딩"이 존재합니다. 이런 한계를 해결할 수 있는 방법은 무엇이 있을까요?
SPA(Single Page Application)
단일 페이지 애플리케이션으로, 현재의 페이지를 동적으로 작성함으로써 사용자와 소통하는 웹 애플리케이션입니다. 연속되는 페이지 간의 사용자 경험을 향상시키고, 웹 애플리케이션이 데스크톱 애플리케이션처럼 동작하도록 도와줍니다.
CSR(Client Side Rendering)
프론트엔드에서 주용되는 상태관리 프레임워크는 jQuery에서 React,Vue,Angular로 변경되며 정적 렌더링에서 CSR로 개발 패러다임이 변경되었습니다.
React를 이용하여 개발을 하면 아래와 같은 내용의 HTML을 서버로 부터 전달 받습니다. DOM 트리가 만들어진 후 JavaScript으로 인해서 동적으로 렌더링이 수행 됩니다. 그러므로 유저에게 처음 보여지는 의미있는 화면은 매우 느리게 나타납니다. 이것을 TTV(Time to View) 가 느리다고 표현 합니다.
...
<div id="root"></div>
...
또한 의미있는 콘텐츠가 포함되지 않은 HTML은 검색엔진에서 해당 사이트가 어떤 사이트인지 판단하기 어려울 것 입니다. 열심히 개발한 사이트가 검색엔지에서 노출되지 않는다면 좋지 않겠죠? 이것을 SEO(Search Engine Optimization)가 구현되지 않았다고 표현 합니다.
TTV가 느린점과 SEO가 되어있지 않는 한계를 해결하기 위해서는 어떻게 해야 할까요??
SSR(Server Side Rendering)
CSR의 한계를 해결할 수 있는 SSR은 서버에게 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식입니다. 즉, CSR의 클라이언트에서 페이지를 생성하는 동작을 SSR에서는 클라이언트 대신 서버에서 페지이를 생성하여 클라이언트에 전송합니다.
SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있습니다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있습니다. 더불어 SEO 또한 쉽게 구성할 수 있다.
SSR만이 CSR의 한계를 해결할 수 있을까?
Rehydration
클라이언트가 서버에서 렌더링 한 HTML의 DOM 트리와 데이터를 재사용하도록 자바 스크립트 뷰를 부팅 합니다.
Prerendering
빌드 타임에 클라이언트 측 애필리케이션을 실행하여 초기 상태를 정적 HTML로 캡쳐합니다.
TTFP(Time to First VByte)
첫 번째 바이트까지의 시간을 의미하여 링크를 클릭한 후 처음으로 들어오는 콘텐츠 비트 사이의 시간을 나타냅니다.
FP(First Paint)
픽셀이 처음으로 사용자에게 표시되는 시점
FCP(Frist Contentful Paint)
요청 콘텐츠가 표시되는 시점
TTI(Time To Interactive)
페이지가 상호작용 가능할게 될 때까지의 시간(이벤트 발생 등)
Rehydration을 통한 서버 렌더링과 CSR 결합
유니버설 렌더링 또는 간단히 "SSR"이라고도 하는 이 접근 방식은 클라이언트 측 렌더링과 서버 렌더링 간의 장점을 섞은 방법 입니다. 일부 페이지만을 생성하여 FP를 빠르게 만들며 나머지 페이지들은 클라이언트 측에서 동적을 생성됩니다. 새로운 솔루션이지만 성능에 상당한 단점이 있을 수 있습니다.
Rehydration이 있는 SSR의 주된 단점은 FP를 개선하더라도 TTTI에 부정적인 영향을 미칠 수 있다는 것입니다. SSR의 페이지는 종종 믿을 수 없을 정도로 빨리 로드되고 인터렉션 가능한 것처럼 보이지만 실제로 클라이언트 측 JS가 실행되고 이벤트 핸들러가 첨부 될 때까지 입력에 응답할 수 없습니다. 응답할 수 없는 시간은 모바일에서는 몇 초 또는 몇 분이 걸릴 수 있습니다.
페이지 로드가 완료된 것처럼 보이지만, 일정 시간동안 클릭하거나 두드려도 반응이 없는 경우를 직접 경험해보았을 수도 있습니다. 이것은 빠르게 실망으로 변합니다. "왜 아무 일도 일어나지 않죠? 왜 스크롤 할 수 없죠?"
참고자료
