1. React 로 짜면 봇이 못읽는다 ???

React 웹은 화면을 만드는 방식에 따라 검색엔진이 내용을 볼 수도 있고 못 볼 수도 있음

서버가 빈 HTML 전달
→ 브라우저가 JS 다운로드
→ React 실행
→ 화면 생성

React 앱은 처음 HTML이 거의 비어 있고,
브라우저에서 JavaScript가 실행된 뒤에 화면이 만듬

이걸 CSR, Client-Side Rendering이라함

SSR: 서버에서 HTML을 미리 만들어서 보냄
SSG: 빌드 시점에 HTML을 미리 만들어 둠
Prerender: 크롤봇용 HTML을 미리 생성

즉 검색엔진이 JavaScript를 실행 하지 않아도 본문을 읽을 수 있게 만드는 것임

Next로 해결하면?

Next.js SSR/SSG
→ 처음부터 본문이 들어간 HTML 제공
→ 크롤봇이 JS 실행 안 해도 읽을 수 있음

요즘 검색엔진/봇 들이 발전하면서 리엑트여도 가능하다라는 말이 있음

2. React가 빠른 이유는 Virtual DOM 때문일까?

흔히 React가 빠른 이유를 Virtual DOM이라고 설명한다.

하지만 실제로는

• 컴포넌트 구조
• 상태 관리
• 변경된 부분만 업데이트

가 더 중요한 이유다.

• Virtual DOM 자체가 무조건 빠른 것은 아니다.

3. SPA는 왜 새로고침이 빠를까?

React는 보통 SPA(Single Page Application) 구조를 사용한다.

페이지 이동 시

• HTML 전체를 다시 받지 않음
• 필요한 데이터만 API로 요청
• 변경된 화면만 갱신

그래서 앱처럼 부드럽게 동작한다.

4. Next.js는 왜 React인데 SEO에 유리하다는거야?

일단 Next.js는 페이지를 만드는 방식을 선택 가능

• CSR: 브라우저에서 화면 생성
• SSR: 요청이 들어올 때 서버에서 HTML 생성
• SSG: 빌드할 때 HTML을 미리 생성

React도 쓰면서, 처음부터 내용이 들어있는 HTML을 줄수도 있다.
즉, 봇들이 읽고 가기 좋은 환경이다

Hydration

1. 서버 → HTML 만들어 브라우저에
2. 화면을 빠르겐 볼 수 있음 ( 다만 껍데기 )
3. 브라우저에서 React JS 실행

위 과정을 Hydration 이라고 함.

5. Next.js에서 "use client"는 무슨 뜻일까?

Next.js App Router에서는 기본적으로 컴포넌트가 서버에서 실행된다.
그런데 useState, useEffect, onClick 같은 브라우저 기능이 필요하면
클라이언트에서 실행해야 한다.

이때 파일 맨 위에 적는 것이 "use client" 이다.

필요 개념

---

CSR

서버에서 거의 빈 HTML → Browser 가 JavaScript를 실행 하여 화면 구성

SPA

페이지가 여러개 처럼 보이게만
사실 HTML 하나에서 화면만 바뀌는 웹 앱

Virtual DOM

React가 화면을 바로 고치기 전에 사용하는 가짜 화면 설계도

• 다시말해, 필요한 부분만 바꿔 동작하는 방식