[Next.js] Client-side Render 와 Static Pre Render (feat.Library 와 Framework )

React.js 는 Library

React router DOM을 설치해야하고, router를 설정하고, 만들고, 설계하고 component를 import 해야한다. 

Next.js는 Framework

코드를 정해진 적절한 곳에 작성을 하면 코드를 불러와서 모든걸 동작하게 하는 것

특정한 규칙이 있어서 그것을 따라 코드를 작성해야 제대로 동작한다. 

React router DOM을 설치해야하고, router를 설정하고, 만들고, 설계하고 component를 import 할 필요가 없다. 

 

Next.js 란?

- pages에서 name으로 router를 처리할 수 있다.

- jsx를 사용하기위해 따로 React를 import 할 필요가 없다. useState나 useEffect를 사용하기 위해서는 필요하다.

 

Next.js 장점

1. 앱에 있는 페이지들이 미리 렌더링 된다. (static하게)

 

create react app은 client-side render를 한다.

client-side render란?

user가 보는 HTML에 정보가 들어있지 않은 상태.

- 브라우저가 HTML을 가져올 때 비어있는 div로 가져온 후 그 후 브라우저가 모든 자바스크립트를 요청해서 자바스크립트와 react.js를 실행해서 client-side의 자바스크립트가 모든 UI를 만든다.

client-side render 단점

- 데이터 속도가 느린 국가에서는 흰 화면만 보이고, 페이지가 로딩이 되는 현상이 발생한다.

 

예시 1. 자바스크립트를 비활성화 시켰다면?

크롬에서 JS를 비활성화 시킨 상태에서 client-side render 방식과 static pre render방식을 비교하면 client-side render방식에서는 HTML에 아무런 정보가 없기 때문에 아래와 같은 에러가 뜨고

client-side render

Next.js로 개발한 웹은 HTML에 기본적인 정보가 들어있기 때문에 아래와 같이 index에 담겨있는 기본적인 정보를 볼 수 있다.

static pre render

JS를 활성화 시킨 상태.

 

2. Hydration

- Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다.

 

페이지를 처음 열면 보게되는 것이 HTML 이다. 그 후 react.js가 클라이언트로 전송됐을 때, react.js 앱이 된다.

 

Hydration 과정

1. next.js는 react.js를 백엔드에서 동작시켜 페이지를 미리 만든다.

2. compoenet를 render 시키고, 렌더링이 끝났을 때 HTML이 되고, next.js는 그 HTML을 페이지의 소스코드에 넣어준다.

3. 유저는 js와 react.js가 로딩되지 않았더라도 콘텐츠를 볼 수 있다.

 

두 방면 모두에서 좋다

1. 유저가 웹사이트에 가면 초기 상태의 component로 미리 생성 된 HTML 페이지를 볼 수 있음

2. 상호작용이 일어나면 react.js는 그걸 받아서 잘 동작한다.

 

이는 SEO에 정말 좋다. SEO는 검색엔진으로 웹사이트에서 페이지가 상위에 랭크되게 하기위해 검색로봇이 돌아다니면서 데이터를 확인하는 행위이다. 하지만 client-side render 방식으로 개발을 하게되면 페이지가 나타나기 전에 검색로봇이 빈 페이지로 인식하고 넘어가서 SEO에 반영이 되지 않는 문제가 생긴다. 하지만 Next.js로 SSR방식을 이용하게 되면 적어도 HTML에 대한 정보는 보여져서 검색로봇이 데이터를 확인할 수 있다.