data fetching

 

SSR과 hydration

고성능의 웹사이트를 만들기 위해서 우리는 Next.js의 수정버전을 사용할것이다. next는 기본적으로 SSR과 함께 성능 최적화 기능이 들어있다. next는 react를 다음과 같은 순서로 사용한다.

 

1. 서버에서 리액트 컴포넌트를 HTML string 형태로 렌더링한다.

2. 렌더링된 HTML을 클라이언트에게 보낸다.

3. javascript로 된 리액트 코드를 클라이언트에게 보낸다.

4. html을 리액트로 hydrate한다.

 

next가 HTML 위에 돌돌 말려진 리액트 코드를 푸는것을 hydrate 라고 이해하면 된다. 그 후에 Next는 React에게 다음과 같이 말한다.

hydration :: 미리 HTML을 로드해 두고 --> 페이지에 접근하게 되면 --> javascript 코드를 실행하여 페이지를 interative하게 완성

HTML 로드 시에는 static HTML로 로드되기 때문에, UI 자체는 Javascript 없이도 확인이 가능하다.

이는 plain React.js에서는 불가능하다 (pre-rendering 지원하지 않음)

 

SSR
표시된 데이터가 항상 최신의 데이터일 때
자주 변경할 수 있는 사용자별 혹은 동적 데이터 일 때,
SSG
정적인 정보를 항상 보여주는 페이지일 때
상호작용 데이터가 존재하지 않을 때.

 

출처: https://simsimjae.tistory.com/390

simsimjae.tistory.com/390