현대 브라우저가 웹 사이트 렌더링을 수행하는 방법에는 크게 두 가지가 있다. 바로 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)이다. 오늘은 이중 SPA에서 사용되는 클라이언트 사이드 렌더링에 대해 알아보고자 한다.
클라이언트 사이드 렌더링이란?
클라이언트 사이드 랜더링(CSR)은 웹사이트가 클라이언트에서 렌더링되는 것을 말한다. 여기서 말하는 클라이언트는 바로 브라우저다. 즉, 브라우저에서 렌더링을 수행하는 것이다. 이 과정은 다음과 같다.
1. 서버에서 index라는 단순한 구조의 HTML 파일을 클라이언트에 보내준다. 일반적인 구조의 SPA에서는 다음과 같은 HTML을 사용하게 되는데, <body> 태그 안에 자바스크립트 링크가 담긴 <script> 태그 이외에는 특별한 정보가 없다는 것을 확인할 수 있다.
<html>
<head>
<meta charset="utf-8"/>
<meta name="name" content="content" />
<title>App</title>
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>2. HTML에 링크된 Javascript 파일(ex. app.js)을 서버로부터 다운받게 된다. 이 Javascript에는 어플리케이션에 필요한 로직, 웹 프레임워크, 라이브러리 등이 포함되어 있다.
3. 추가로 필요한 데이터가 있을 경우 서버에서 HTTP 요청을 통해 JSON 형식의 데이터를 받아온다.
4. 받아온 리소스들을 기반으로 동적으로 HTML DOM을 생성해서, 유저에게 최종적인 어플리케이션을 보여준다.
현대 웹 어플리케이션의 대부분을 차지하는 SPA에서는 이러한 방식의 브라우저 렌더링을 사용하며, 우리가 프론트엔드 개발을 하면서 사용하는 React, Angular, Vue와 같은 웹 프레임워크 역시 모두 CSR 베이스이다. 실제로 React에서 컴포넌트를 만드는 방식은 CSR에서 DOM을 만드는 행위와 유사하다.
클라이언트 사이드 렌더링이 나오기까지
과거의 웹사이트는 Static Web Page였다. 서버에 이미 만들어진 HTML 파일들이 있고, 유저가 브라우저에서 특정 주소를 입력하면 서버에 저장되어 있던 HTML 파일들을 받아와서 브라우저에 보여주는 형식이었다. 문제는 유저가 화면과 상호작용할 때 발생했다. 버튼을 클릭하거나 화면을 이동할 때마다 다시 서버에 HTML 문서를 요청해서 받아와야 했는데, 이 때문에 지속적으로 브라우저에 흰 화면이 노출되면서 깜박이는 현상을 유저가 겪어야 했다. 이후 1998년, XMLHttpRequest API가 등장하게 되면서, 유저 인터렉션이 발생할 때 서버에서 HTML 문서 전체가 아닌, JSON 포맷의 데이터를 필요한 만큼만 받아와 화면에 보여줄 수 있게 되었다. 이 데이터가 Javascript를 통해 동적으로 생성된 DOM을 기반으로 페이지가 업데이트 되는 것이다. AJAX라고 불리는 이 방식으로, 웹사이트는 Javascript를 통해서 서버에서 데이터를 비동기 방식으로 필요한 만큼만 받아올 수 있게 되었다. 이것이 현재 널리 쓰이고 있는 SPA, Single Page Application의 기반이 되었다. SPA에서는 유저가 한 페이지 내에 머무르면서, 그때 그때 필요한 데이터만을 서버에서 받아와 페이지를 부분적으로 업데이트한다. 이 SPA 웹 어플리케이션에서 사용하는 방식이 바로 CSR(클라이언트 사이드 렌더링)이다.
CSR은 어떤 특징이 있을까
CSR 방식으로 만들어진 SPA는 필요한 모든 리소스를 최초 접근시 단 한번만 다운로드하게 된다. 이후 새로운 페이지로 이동 시, 필요한 데이터만을 서버에서 JSON으로 전달받아 페이지를 업데이트한다. 이때 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하기 때문에 흰 화면이 보이는 새로고침이 발생하지 않게 된다는 장점이 있다. 이는 네이티브와 유사한 수준의 성능이 요구되는 현대 웹 어플리케이션에 반드시 필요한 기능이기도 하다. 그러나 모든 소프트웨어 아키텍처에는 Trade-Off가 존재하는 것처럼, CSR에도 단점이 존재한다.
- 초기 구동 속도가 느리다. 웹 사이트 진입 시 더 많은 초기 리소스 다운로드와 추가 렌더링이 필요하다는 것이다. 다만 초기 구동 속도가 느리다는 단점은 이후 페이지 이동 시 빨라지는 속도, 사용성, 그리고 트래픽 감소에 비하면 결정적인 단점은 아니라고 평가된다.
- SEO(검색엔진 최적화)가 낮아진다는 문제점도 있다. 구글, 네이버와 같은 검색엔진들은 Web Crawler를 통해 웹사이트들의 HTML 문서를 분석하여 검색에 필요한 데이터들을 파싱해서 사용한다. 이때 CSR에서 쓰이는 HTML의 body는 대부분 비어 있다. 따라서 검색엔진의 크롤러가 HTML의 실제 구조를 파싱하는 데에 어려움을 겪는 경우가 많다.
'Web' 카테고리의 다른 글
| 서로 다른 윈도우 간 안전하게 통신하는 방법 (0) | 2024.03.17 |
|---|---|
| Axios 인터셉터로 JWT 토큰 로테이션 구현하기 (0) | 2024.02.18 |
| 헷갈리는 줄바꿈, 올바르게 제어해보자 (15) | 2023.12.10 |
| JavaScript로 이미지 파일 데이터 다루기 (0) | 2023.08.31 |
| [Web] DOM API를 효과적으로 사용해보자 (0) | 2022.04.16 |
