React를 처음 배우면 보통 이런 구조를 보게 된다.
<body>
<div id="root"></div>
</body>
브라우저가 처음 받는 HTML에는 실제 화면 내용이 거의 없다. 대신 브라우저가 JavaScript를 다운로드하고 실행한 뒤에야 React가 화면을 만들어낸다. 이런 방식을 CSR(Client Side Rendering)이라고 한다.
그런데 왜 React는 굳이 이런 구조를 선택했을까?
React SPA가 등장한 이유
기존 웹사이트는 보통 MPA(Multi Page Application) 방식으로 동작했다. 그러나 페이지를 이동할 때마다 아래와 같은 문제가 발생했다.
- 새로운 HTML 요청
- 전체 페이지 새로고침
- 화면 깜빡임
- 상태 초기화
React는 이런 불편함을 해결하기 위해 등장했다. 브라우저 안에서 JavaScript로 화면을 만들고 필요한 부분만 다시 렌더링하면서 더 부드러운 사용자 경험을 제공한 것이다. 그래서 페이지 전환이 자연스럽고, 상태 관리가 쉬운 인터랙션 중심 서비스에 강한 구조를 만들 수 있게 되었다.
CSR의 동작 과정
실제로 CSR은 어떻게 동작할까?
React 앱을 빌드하면 서버는 처음에 빈 HTML을 보낸다. 브라우저는 이걸 받아도 그릴게 없다. JS 번들을 다운받고 → 실행하고 → React가 DOM을 그린 후에야 비로소 화면이 보인다. 이 동안 FCP는 0이다.
그래서 사용자가 실제 콘텐츠를 보기 위해서는 JavaScript 실행이 끝날 때까지 기다려야 한다는 점이다.
FCP (First Contentful Paint) 는 사용자가 처음으로 콘텐츠를 볼 수 있게 되는 시점을 의미한다.
CSR 환경에서는 JavaScript 실행 전까지 실제 콘텐츠가 없기 때문에 FCP가 늦어질 수 있다.
CSR의 문제점
1. 초기 로딩 시 빈 화면이 보인다
브라우저는 JavaScript를 다운로드하고 실행하기 전까지 화면을 제대로 그릴 수 없다. 번들 크기가 크거나 네트워크 환경이 느리면 사용자는 한동안 빈 화면을 보게 된다.
React 자체의 문제가 아니라 "모든 렌더링을 브라우저에 수행한다"는 구조적 특징에 가까운 문제다.
2. SEO에 불리하다
검색엔진은 우선 HTML을 읽어 페이지 내용을 파악한다. 하지만 CSR 구조에서는 초기 HTML에 실제 콘텐츠가 거의 없다.
예를 들어 검색엔진이 처음 받는 HTML은 이런 형태에 가깝다.
<body>
<div id="root"></div>
</body>
즉, 본문 콘텐츠, 메타데이터, Open Graph 정보 등이 제대로 포함되지 않을 수 있다. 블로그, 쇼핑몰, 랜딩페이지처럼 검색 유입이 중요한 서비스에서는 불리하게 작용할 수 있다.
Next.js와 React의 차이
그렇다면 Next.js는 무엇을 바꿨을까? 바로 렌더링 시점을 바꿨다. 서버에서 이미 내용이 채워진 HTML을 생성해 전달하는 방식이다.
브라우저가 이 HTML을 받는 순간 바로 화면을 그릴 수 있다.즉, FCP가 즉시 발생하는 것이다. 사용자는 더 빠르게 화면을 볼 수 있고, 검색엔진도 콘텐츠를 쉽게 읽을 수 있다. 이 과정을 사전 렌더링(Pre-rendering)이라고 한다.
Hydration이란
그런데 HTML만 있으면 React는 어떻게 동작할까? 서버가 HTML을 미리 만들어 보내더라도 그 상태만으로는 단순한 정적 문서에 가깝다.
예를 들어 버튼 클릭, 이벤트 처리 같은 React 기능은 아직 동작하지 않는다. 그래서 기존 HTML과 연결하여 이벤트를 등록하고 React 상태를 복원한다. 이 과정을 Hydration(수화)라고 부른다.
중요한 점은 “HTML을 다시 만드는 것”이 아니라 이미 존재하는 HTML에 React를 연결하는 과정이라는 점이다.
화면은 빨리 보이는데 왜 아직 느릴 수 있을까?
Next.js는 서버에서 HTML을 미리 생성하기 때문에 CSR보다 FCP를 앞당길 수 있다. 즉, 사용자는 더 빠르게 화면을 볼 수 있다.
하지만 화면이 보인다고 해서 바로 상호작용 가능한 것은 아니다. 예를 들어 버튼 클릭이나 상태 변경 같은 동작은 아직 바로 실행되지 않을 수 있다.
이처럼 실제로 사용자가 정상적으로 상호작용할 수 있게 되는 시점을 TTI (Time To Interactive)라고 한다.
즉, 화면은 빠르게 보이지만 실제로 클릭하거나 동작하기까지는 JavaScript 실행이 필요하다. SSR은 화면을 먼저 보여주는 데 강점이 있지만 결국 상호작용을 위해서는 브라우저에서 JavaScript가 실행되어야 한다.
마무리
React의 CSR 구조는 SPA 경험에 강력한 장점을 제공했지만, 아래와 같은 문제도 함께 가져왔다.
- 초기 로딩
- SEO
- JavaScript 의존성
Next.js는 서버에서 미리 HTML을 생성하는 방식으로 이런 문제를 해결하려고 등장한 프레임워크다. 하지만 모든 페이지를 항상 SSR로 처리하는 것이 정답은 아니다.
상황에 따라 정적으로 미리 생성할지, 요청마다 서버에서 렌더링할지, 일정 주기로 다시 생성할지 선택이 필요하다.
'💻 STUDY > Frontend' 카테고리의 다른 글
| z-index 무한루프에서 벗어나기 — React Portal 제대로 이해하기 (0) | 2026.06.22 |
|---|---|
| Next.js App Router의 렌더링 방식 이해하기 (0) | 2026.06.11 |
| React 클라이언트 전역 상태 관리 (0) | 2026.06.07 |
| Storybook이란? — props가 많아질수록 개발이 느려진다고 느꼈다면 (0) | 2026.06.01 |
| React는 왜 Suspense를 만들었을까? (1) | 2026.05.21 |
