Rendering 렌더링이 뭘까?
렌더링은 쉽게 말해 사용자에게 화면에 보이는 형태로 변환하는 과정을 뜻한다.
예를 들어 내가 머리속으로 그림을 생각하고 친구에게 보여주고 싶다면, 종이에 그림을 그려 보여줘야 한다.
렌더링은 크게 두 가지 방식으로 나뉜다. Client Side Rendering과 Server Side Rendering이다.
SSR (Server Side Rendering)
- 사용자가 웹사이트 요청을 보낸다.
- 서버는 바로 렌더링 가능한 HTML 파일을 만들어 보낸다.
- 브라우저는 서버가 보내는 HTML 파일을 바로 읽을 수 있어 화면에 보여지지만 아직 자바스크립트를 받고 읽지 않았기 때문에 조작이 불가능하다.
- 브라우저가 자바스크립트를 다운 받는다.
- 다운 받고 있는 사이에 사용자는 content를 볼 수 있지만 조작은 할 수 없다. 하지만 사용자의 조작은 기억한다.
- 브라우저가 자바스크립트를 실행한다. 그리고 전에 기억하던 사용자의 조작이 실행되고 이제 페이지는 상호작용이 가능해진다.
장점
- 빠른 초기 로딩: HTML이 완전히 렌더링된 상태로 제공되므로 사용자에게 빠르게 콘텐츠를 보여줄 수 있다.
- SEO 친화적: 완전한 HTML을 제공하므로 검색 엔진이 콘텐츠를 쉽게 크롤링할 수 있다.
- 컨텐츠 중심 사이트에 적합: 블로그, 뉴스, 전자상거래 사이트처럼 SEO와 초기 로딩이 중요한 경우 유리하다.
단점
- 서버 부하 증가: 모든 요청마다 HTML을 서버에서 생성해야 하므로 서버 리소스를 더 많이 소비한다.
- 페이지 전환 속도 느림: 페이지를 전환할 때마다 서버로 요청해야 하므로 네비게이션 속도가 느릴 수 있다.
- 페이지 이동 할때마다 클라이언트로 완성된 HTML을 보내는 과정을 반복하므로 속도가 느려진다.
CSR (Client Side Rendering)
- 사용자가 웹사이트 요청을 보낸다.
- 서버 또는 CDN이 HTML, CSS, JS 파일을 전달한다.. CDN- 지리적으로 가까운 서버에서 요청에 응답하는 방식.
- 브라우저가 HTML을 다운로드하고 파싱하기 시작한다. 하지만 사용자는 아직 아무것도 볼 수 없다.
- HTML 문서에 연결된 JS 파일을 다운로드한다 (<script>가 <body>에 있거나 defer 속성이 있으면: HTML 파싱 후 JS가 실행됨)
- JS가 실행되고, 데이터를 위한 API 호출이 된다. 사용자는 placeholder만 볼 수 있다 (e.g. 스켈레톤 UI, ...Loading, 스피너 등).
- 서버가 API로부터의 요청에 응답한다.
- API로부터 받는 데이터를 placeholder에 넣어준다. 이제 페이지는 상호작용이 가능해진다.
장점
- 더 나은 사용자 경험: 동적이고 반응적인 UI를 구현하기에 적합하다.
- 빠른 페이지 전환: 클라이언트 측에서만 동작하기 때문에 네비게이션 속도가 빠르다.
- 서버 부하 감소: 서버는 정적인 파일만 제공하므로 요청 처리량이 비교적 적다.
- 첫 페이지를 로딩할 때 이미 필요한 모든 스크립트와 코드를 클라이언트로 가져오기 때문에, 페이지 이동 시 속도가 빠르다.
단점
- 초기 로딩 속도 느림: JavaScript를 다운로드하고 실행해야 하므로 초기 렌더링이 느릴 수 있다.
- SEO에 불리함: HTML이 빈 상태로 제공되므로 검색 엔진이 콘텐츠를 크롤링하기 어렵다. (단, React의 Next.js나 Vue의 Nuxt.js처럼 이를 보완하는 프레임워크도 존재한다.)
CSR Crawling 느린 이유
CSR이 크롤링이 느린 이유는 브라우저가 JavaScript를 실행해야만 콘텐츠를 렌더링하기 때문이다.
검색 엔진 봇(크롤러)은 일반적으로 HTML 콘텐츠를 읽어 웹 페이지를 이해하고 색인한다. 그러나 CSR에서는 브라우저가 HTML을 처음 받아왔을 때, 주요 콘텐츠가 없고, <div id="app"></div> 같은 빈 요소만 전달된다.
JavaScript가 실행된 후에야 콘텐츠가 동적으로 생성되기 때문에 크롤링이 어려워질 수 있다. 검색 엔진 크롤러는 JavaScript를 실행하는 데 시간이 걸리거나, 일부는 아예 JavaScript를 실행하지 못한다.
반면 SSR은 브라우저가 자바스크립트를 아직 실행하지 않더라도, 검색 엔진은 이미 HTML에 포함된 콘텐츠를 읽을 수 있기 때문에 페이지의 정보를 크롤링하는 데 문제가 없다.
CDN의 작동 원리
- 사용자가 웹사이트에 접속하면, 요청은 CDN 서버로 라우팅된다.
- CDN은 사용자의 지리적 위치를 기준으로 가장 가까운 서버(에지 서버, Edge Server)에서 콘텐츠를 전달한다.
- 만약 요청한 콘텐츠가 에지 서버에 없으면, 원본 서버(origin server)에서 가져와 에지 서버에 캐싱한 후 사용자에게 제공한다.
이 과정을 통해 사용자와 서버 간의 물리적 거리가 단축되고, 콘텐츠 전송 속도가 빨라진다.
CSR은 SPA
SPA(Single Page Application)는 사용자가 웹사이트를 이용하는 동안 하나의 HTML 페이지로 동작하는 웹 애플리케이션을 의미한다. 전통적인 방식과 달리, SPA는 페이지를 이동할 때마다 서버에서 새로운 HTML 파일을 가져오지 않고, JavaScript를 이용해 현재 페이지를 동적으로 업데이트한다.
여기서 궁금한게.... 자바스크립트가 어떻게 업데이트 하는거지...?
웹 페이지가 로드될 때, 브라우저는 HTML을 파싱하여 DOM 트리를 생성한다. 이 DOM 트리는 페이지의 HTML 요소들을 부모-자식 관계를 가진 노드로 나타내며, 각 노드는 JavaScript를 통해 접근하고 수정할 수 있다.
예를 들어, 다음과 같은 HTML 문서가 있다고 할 때:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
위 HTML 문서는 브라우저에서 다음과 같은 DOM 트리로 변환된다:
- html
- head
- title
- "My Web Page"
- body
- h1
- "Hello World"
- p
- "This is a paragraph."
'Javascript' 카테고리의 다른 글
| 이벤트 버블링, 캡처링, 위임 (0) | 2025.02.13 |
|---|---|
| Callback hell, sync and async function (0) | 2025.01.17 |
| this, call, apply, bind (1) | 2025.01.15 |
| Data Type (0) | 2025.01.15 |
| 변수 선언, 초기화, 할당의 차이점 (0) | 2025.01.15 |