렌더링 패턴 ( CSR )

728x90

CSR ( Client Side Rendering )

페이지의 콘텐츠를 브라우저(클라이언트)에서 동적으로 생성하는 방식
사용자가 웹사이트를 방문했을 때, 서버는 완성된 HTML을 보내주는 대신 기본 HTML 틀과 자바스크립트 파일(JavaScript Bundle)만 보내주고, 실제 화면에 보여질 내용은 브라우저에서 자바스크립트가 실행되면서 렌더링되는 방식입니다.

1. 사용자가 웹사이트에 접속합니다.

2. 서버는 최소한의 HTML을 응답으로 보냅니다.

<html>
  <head>
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/main.js"></script>
  </body>
</html>

3. 브라우저가 HTML을 파싱(해석)합니다.

브라우저의 HTML 파서가 HTML 코드를 위에서부터 아래로 읽어나갑니다. <script> 태그를 만나면 해당 자바스크립트 파일(/main.js)을 서버로부터 요청해서 다운로드합니다.

4. 자바스크립트 번들이 다운로드되고 실행됩니다.

번들 파일 안에는 React, Vue, 또는 기타 프레임워크 코드와 함께 앱의 실제 동작 코드가 들어 있습니다.
React 같은 프레임워크를 초기화하고 <div id="root"> 같은 DOM 요소를 찾은 뒤 그 안에 콘텐츠를 동적으로 생성하여 삽입합니다.

const root = document.getElementById("root");

// DOM manipulation
root.appendChild(...)

5. 화면에 콘텐츠가 표시됩니다.

화면에 콘텐츠가 렌더링되면 곧바로 이벤트 리스너가 붙어서 사용자는 즉시 클릭이나 입력이 가능합니다.
초기 로딩 시 JS 번들 전체를 받아오면, 이후 페이지 이동 시에는 새로 서버에 요청하지 않고 클라이언트에서 화면을 전환하는 SPA 방식으로 작동할 수 있습니다. 이는 빠르고 부드러운 내비게이션 경험 제공합니다.

하나의 JS 번들에 모든 페이지 로직이 들어가므로, 앱이 커질수록 번들이 커지게 되고, 이는 다운로드 시간이 늘어나고, js 실행 시간을 지연시켜요. 결국 초기 로딩 시간이 증가하는 결과를 초래합니다.
js 실행을 하지 않으면 콘텐츠를 못 보기 때문에 SEO 최적화에 불리합니다.

Lighthouse / Web Vitals

LighthouseGoogle이 제공하는 오픈소스 웹사이트 검사 도구로, 웹사이트의 성능, 접근성, 권장사항, SEO 를 자동으로 분석해 점수를 매기고 개선 방향을 제시해 줍니다.분석 요소Performance (성능)Web Vital

jkh2801.tistory.com

자바스크립트 (bundle.js) 다운로드 및 실행까지 기다려야 하므로, 초기 로딩 속도가 느리다.
- FCP ( First Contentful Paint ) : 브라우저에 최초로 콘텐츠를 화면에 렌더링한 시점
- LCP ( Largest Contentful Paint ) : 가장 큰 콘텐츠 요소(주로 이미지, 텍스트 블록 등)가 화면에 표시되는 시간

728x90