모던 프론트엔드 렌더링 : CSR은 기존 웹의 패러다임을 완전히 바꾼 혁신적인 기술이다. 초기 AJAX 기반 웹앱들에서 시작된 이 방식은 React의 Virtual DOM과 컴포넌트 시스템 덕분에 폭발적으로 성장했으며, 개발자들이 앱 같은 웹 경험을 쉽게 구현할 수 있게 만들었다. 하지만 초기 로딩 속도와 SEO문제를 해결하기 위해 SSR과 SSG 같은 방식이 주목 받고 있다.
# CSR ( Client Side Rendering )
리액트를 접하면서 지겹도록 들은 CSR 렌더링 방식은 화면 새로고침 없이 자유자재로 페이지를 넘나들며 사용자에게 끊김 없는 웹 사용 경험을 제공한다. 즉각적인 반응으로 사용자가 웹 애플리케이션과 직접 상호작용하는 듯한 경험을 선사한다.
CSR란?
브라우저에서 Javascript를 실행하여 화면을 렌더링하는 방식으로, 서버에서는 최소한의 HTML <div id=”root"></div> 과 Javascript 번들만 전송하고, 실제 페이지 내용은 브라우저에서 동적으로 생성하는 렌더링 방식을 의미한다. 즉각적인 상호 작용으로 페이지간 이동 시 전체 페이지를 다시 로드하지 않아서 앱처럼 부드러운 사용자 경험을 제공하고 초기 로딩 이후에는 API데이터만 주고 받으면 되기 때문에 서버 부하가 감소한다. 가장 큰 장점으로는 즉각적인 상호작용으로 복잡한 UI 상태 관리나 실시간 업데이트가 필요한 경우 어떤 렌더링 방식보다 적합하다고 생각한다.
동작 과정
•서버 : 빈 HTML 파일과 Javascript 번들을 브라우저에 전송
•브라우저 : Javascript를 다운하고 실행
•렌더링 : React등이 DOM을 조작하여 화면 생성
•API 호출: 필요한 데이터를 서버에서 가져옴
•UI 업데이트: 가져온 데이터로 화면을 완성
단점
최소한의 HTML과 Javascript 번들을 다운로드 받고 실행해야 하므로 첫 화면이 늦게 렌더링된다. 코드 스플리팅으로 어느 정도 해결이 가능하지만 모든 화면제어를 js가 브라우저 에서 생성하고 렌더링하기 때문에 SSR이나 SSG보다 느릴 수 밖에 없다. 또한 Javascript가 실행하기 전에는 빈 HTML만 보이기 때문에 SEO에 적합하지 않다 .
SEO
search engine optimization의 약자로 검색 엔진 최적화라는 뜻이다. 이는 웹사이트가 검색 결과에서 더 잘 노출되도록 하는 작업인데, 크롤링 봇이 페이지를 요청 하면 서버로 부터 응답 받은 HTML을 즉시 분석한다. 하지만 크롤링 봇마다 Javascript 실행 방식이 다르다. 일부 크롤러는 Javascript를 실행하지 않고, 실행 하더라도 제한적으로만 실행하거나 완료 될 때까지 기다리지 않을 수 있다.
이 말은 CSR은 크롤링 봇이 웹사이트를 제대로 분석하지 못할 수 도 있다는 뜻이다.
<!DOCTYPE html>
<html>
<head><title>CSR 웹 애플리키에션</title></head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
크롤링 봇이 방문을 하면 CSR 애플리케이션은 이런 빈 HTML을 전달할 것이다 . 내용이 없으므로 크롤링은 이 웹페이지는 비어있는 페이지라 판단하고 떠날 수도 있다.. Javascript를 실행 한다고 해도 React 앱이 API를 호출하는 동안을 기다리지 않을 수도 있다. 구글은 JS 파일을 잘 실행한다고 하지만 완벽하지 않고 다른 다른 검색엔진들은 아직 제한적이기에 CSR 렌더링 방식은 SEO에 불리할 수 있다.