Next.js React 차이

---

React와 Next.js의 사전 렌더링 차이점

 

React의 동작 원리:

React에서는  <div>Hello World</div>와 같은  코드를  JSX라는  JavaScript의 확장 문법으로 작성한다. 이 JSX는 브라우저가 직접 해석할 수 없어, React 애플리케이션의 JavaScript 코드가 브라우저에 의해 로드되고 실행된 후에 HTML DOM에 삽입된다.

 

이 과정은 사용자의 브라우저가 JavaScript를 로드하고 실행하여 React가 JSX를 해석하고 DOM에 삽입하는 것을 의미한다.

 

 

Next.js의 정적 사이트 생성과 서버 사이드 렌더링:

Next.js에서는 정적 사이트 생성(Static Site Generation)이나 서버 사이드 렌더링(Server-Side Rendering)을 통해 서버 측에서 <div>Hello World</div> 등을 실제 HTML로 렌더링 할 수 있다.

 

이렇게 생성된 HTML 페이지는 서버로부터 최초의 응답에 포함되어 클라이언트(브라우저)에 전송된다. 사용자의 브라우저는 이미 완전히 렌더링 된 HTML 페이지를 받게 되며, 추가적인 JavaScript 실행 없이도 해당 콘텐츠를 즉시 볼 수 있다.

 

 

---

SEO 차이점

 

React SEO:

React 애플리케이션에서는

<div>Hello World</div>

와 같은 콘텐츠가 사용자의 브라우저에서 JavaScript를 통해 렌더링 된다.

 

이 경우, 서버로부터 받는 초기 HTML 파일에는 실제 콘텐츠가 포함되어 있지 않다. 그래서 검색 엔진이 JavaScript를 실행하지 않을 경우, React로 만든 웹사이트의 해당 콘텐츠는 HTML에 담겨있지 않기 때문에 검색 엔진에 의해 쉽게 인덱싱 되지 않는다.

 

예를 들어, "Hello World"라는 텍스트를 검색했을 때, React로 만든 웹사이트는 <div>Hello World</div>가 HTML이 아닌 JSX 문법 이기 검색 결과에 나타나지 않을 수 있다.

 

Next.js SEO:

반면, Next.js에서는 정적 사이트 생성을 통해 <div>Hello World</div>가 포함된 완전한 HTML 페이지를 서버 사이드에서 미리 생성한다.

 

이렇게 생성된 HTML 페이지는 검색 엔진이 크롤링할 때 모든 콘텐츠를 즉시 볼 수 있어, 검색 엔진에 의해 더 잘 인덱싱된다.

 

따라서, "Hello World"라는 텍스트를 검색했을 때, Next.js로 만든 웹사이트는 검색 결과에 더 높은 순위로 나타날 가능성이 크다.

 

 

---

 

 

SSR(Server Side Rendering) 사전에 데이터를 미리 서버에서 렌더링

 

웹사이트에 "사용자 리뷰" 섹션이 있다고 가정

 

이 웹사이트는 클라이언트 사이드 렌더링을 사용해, 사용자가 페이지를 방문할 때마다 최신 리뷰를 불러오도록 설정되어 있다.

 

서버로부터 받는 초기 HTML에는 "사용자 리뷰" 섹션의 내용이 포함되어 있지 않다. 리뷰는 JavaScript가 로드되고 실행된 후에 브라우저에 나타난다.

 

이로 인해 검색 엔진은 최신 리뷰를 인덱싱할 수 없고, 사용자가 "최신 사용자 리뷰"를 검색했을 때 이 웹사이트는 검색 결과에 나타나지 않는다.

 

Next.js를 사용한 SSR (서버 사이드 렌더링 있는 경우):

같은 "사용자 리뷰" 섹션이 있지만, 이번에는 Next.js의 SSR(Server Side Rendering)기능을 사용한다.

이미 서버는 SSR을 통해 최신 리뷰를 사용자 요청이 없이도 데이터를 수집해 HTML로 만들어 놨기 때문에 사용자가 페이지에 접속할 때마다 서버는 최신 리뷰를 포함한 완전한 HTML 페이지를 생성하고 전송한다.

 

서버에서 생성된 HTML에는 이미 최신 리뷰의 내용이 포함되어 있어, 페이지가 로드될 때 바로 사용자에게 보여진다.

검색 엔진은 이 최신 리뷰의 내용을 쉽게 인덱싱할 수 있으며, "최신 사용자 리뷰"를 검색한 사용자는 이 웹사이트를 검색 결과에서 볼 수 있다.