SSR / CSR
실제 dom
브라우저가 html+css 파싱해서 만든 라이브 노드 트리구조
가상 dom
브라우저것이 아닌, React 같은 라이브러리가 js객체로 들고있는 UI 설계도 트리
즉, 상태가 바뀌면 새 가상 dom트리를 만들고 , 이전에 만든 Virtual dom과 비교해서 바뀐부분만 실제 DOM에 반영한다.
“서버에서 만들어 오느냐(SSR) vs 브라우저에서 만들어 그리느냐(CSR)”
CSR(client side Rendering)
브라우저가 화면을 직접 만들어 그리는 방식
- 얇은
index.html을 파싱하면서 JS/CSS를 병렬 다운로드 - HTML 파싱이 끝나면 JS 실행 → React 마운트, 초기의 가상 DOM을 실제 DOM으로 렌더링
- 이후 페이지가 변경되면 브라우저(react)가 기존 가상 DOM vs 새 가상 DOM을 diff하여 바뀐 부분만 실제 DOM으로 업데이트
- 필요한 데이터가 있을 때
fetch()등 AJAX 통신으로 서버에서 JSON을 받아와 상태 갱신
특징
- 초기 페이지 렌더링은 다소 느릴 수 있음
- 이후 변경·전환은 매우 빠름 → 앱 같은 사용감
- 초기 HTML body가 비어있기에 검색노출면에서 불리하다.
CSR을 사용하면 검색엔진의 효율성저하와 초기 로딩속도가 느리다는 단점으로 , SSR을 사용할수있다. 이를 통해 초기 로딩속도가 개선되고, 검색 엔진 최적화(SEO) 또한 가능하다.
SSR(Server side Rendering)
서버가 화면을 먼저 만들어서 보내주는 방식
- 초기요청에는 서버가 필요한 데이터들을 먼저 React로 HTML을 미리 렌더링한 완성된 HTML을 응답
- 브라우저는 그 HTML을 즉시 파싱·페인트하고, 동시에 CSS/JS 병렬 다운로드
- *JS 로드가 완료되면 하이드레이션(hydration)이 일어나 서버가 만든 DOM에 이벤트/상호작용을 붙여 React 활성화**
요약
- 빠른 첫 화면+ 이후에는 CSR처럼 가상 DOM diff로 부분 업데이트
- 데이터는 필요할 때 fetch로 JSON을 받아 갱신
하이드레이션(Hydration)
서버가 먼저 만들어 보낸 완성된 HTML에, 브라우저에서 내려온 JS가 이벤트·상태·가상 DOM을 붙이는 과정.
Next.js
React를 서버와 클라이언트(풀스택)에서 모두 쓰게 해주는 웹 프레임워크
→ 페이지 이동, 데이터 가져오기, 렌더링 방식(SSR·CSR·SSG)을 파일 구조만으로도 쉽게 설정·자동 처리
역할 정리
- React: 브라우저에서 UI를 만드는 자바스크립트 라이브러리(SPA의 핵심)
- Node.js: 브라우저 밖에서 JS를 돌리는 런타임(npm, 개발 서버, 백엔드, SSR 실행 엔진)
- Next.js: React 위의 프레임워크 — 라우팅/SSR·SSG/번들링 등을 묶어 서버·클라이언트 모두에서 React 앱을 쉽게 운영하도록 지원
toddcanwell