NextJS가 SEO에 좋은 이유
- 검색 엔진 크롤러는 자바스크립트를 실행하지 못하고, 오직 초기에 서버에서 전송된 HTML 문서만을 읽을 수 있기 때문
- CSR 에서 서버에서 전송된 HTML 문서 : 비어있음
> 후에 브라우저가 자바스크립트를 써내려간다(런타임에)
- SSR 에서 서버에서 전송된 HTML 문서 : 이미 완성되어 있음
- 따라서 SSR인 NextJS가 SEO에 좋다는 것~
CSR의 작동 방식
1. 초기 HTML 로드
브라우저는 서버로부터 최소한의 HTML 구조만 받습니다. 이 HTML은 주로 빈
<div> 요소(예: <div id="root"></div>)와 JavaScript 파일 링크를 포함합니다.
2. JavaScript 다운로드
브라우저는 링크된 JavaScript 파일들을 다운로드합니다. 이 파일들에는 React 라이브러리, 애플리케이션 코드, 그리고 필요한 모든 컴포넌트가 포함됩니다.
3. JavaScript 실행
다운로드가 완료되면 브라우저는 JavaScript를 실행합니다. React는 이 시점에서 Virtual DOM을 생성하고 실제 DOM과 비교하기 시작합니다.
4. DOM 조작
React는 JavaScript를 사용하여 동적으로 DOM을 조작합니다. 이 과정에서 컴포넌트들이 렌더링되고, 페이지의 구조와 콘텐츠가 생성됩니다. (UI가 보여짐)
5. 이벤트 리스너 추가
React는 필요한 이벤트 리스너들을 DOM 요소에 추가하여 사용자 상호작용에 반응할 수 있게 합니다.
6. 동적 업데이트
이후 상태 변경이나 사용자 상호작용에 따라 React는 Virtual DOM을 업데이트하고, 필요한 부분만 실제 DOM에 반영합니다.
SSR 작동방식
Next.js와 같은 프레임워크에서는 서버에서 렌더링된 HTML을 클라이언트로 보내고, 클라이언트에서는 해당 HTML을 가져와 자바스크립트 이벤트와 상태를 연결합니다.
~ 서버가 하는 일 ~
- 초기 HTML 로드: 서버에서 리액트 컴포넌트들을 실행함으로써 HTML을 (필요한 모든 콘텐츠와 함께) 사전 렌더링합니다. 브라우저는 빈 페이지 대신 완전히 렌더링된 정적 HTML 페이지를 받습니다.
예)
<div> <p>You clicked 0 times</p> <button>Click me</button> </div>
~ 클라이언트가 하는 일 ~
- 자바스크립트 다운로드: 미리 렌더링된 HTML을 받은 후에도 브라우저는 여전히 React 및 기타 앱 로직용 자바스크립트 파일을 다운로드해야 합니다.
- 하이드레이션 : 이벤트 리스너를 연결하고 상호작용하게 만들어, 미리 렌더링된 HTML을 "하이드레이트"합니다.
- 하이드레이션: 후에 넘어오는 JS파일을 HTML DOM에 넣어주는 것
- 하이드레이션 과정에서 하는 일
• DOM과 Virtual DOM을 비교 및 동기화 : 서버와 클라이언트 간의 상태 일관성 유지
• state 복원 및 데이터 바인딩 : 사용자의 상호작용으로 상태 업데이트
• 코드 나누기 및 점진적 하이드레이션: 페이지의 중요한 부분부터 점진적으로 처리(초기 로딩 속도 개선)
- 동적 업데이트: 리액트는 하이드레이션 후에도 사용자 상호 작용 또는 상태 변경을 기반으로 동적으로 업데이트를 계속 관리합니다.