Next.js 동작 방식

1. 페이지를 요청하면 웹서버가 스타일만 적용된 단순 HTML 도큐먼트를 미리 만들어서(pre-rendering) 보내준다.
   1. 받은 화면은 스타일이 적용된 통짜 HTML 파일이며, 자바스크립트 요소들이 하나도 적용되어 있지 않은 상태임
   2. 이 시점에 미리 데이터 채워둬야 하는 데이터가 있다면, getInitialProps 으로 미리 받아놓음
   3. js 청크 파일도 같이 보낸다
2. 리액트가 그 자바스크립트 코드들을 앞전에 만들어 둔 HTML DOM 요소 위에서 한번 더 렌더링을 해서, 액션을 추가한다.
   1. 이러한 작업을 Hydrate 라고 부른다
   2. 화면 동작 이후 한번 깜빡이는 듯한 현상이 하이드레이션이 있었다는 현상 (웹폰트 적용 여부 때문)

Next.js의 Hydrate란?

SSG(Static Site Generation)

빌드 시에 미리 페이지를 구성해두었다가 요청을 받으면 단순히 반환하는 것

단점은

• 모든 파일을 정적파일로 만들 수 없음. 잦은 업데이트가 있는 페이지에는 적용하지 않는 것이 좋음

CSR vs SSR vs SSG

React의 동작방식

DOM은 동적 UI에 최적화 되어 있지 않기 때문에 DOM을 직접 변경하는 것은 많은 비용이 든다.

이를 개선하기 위해 React는 Virtual DOM 개념을 도입함.

DOM의 사본인 virtual DOM을 생성해서 이전의 virtual DOM과 비교해, 변경이 이루어진 부분만 찾아내서 그 부분의 DOM만 업데이트 함으로써 효과적으로 UI를 변경한다.

React가 작동하는 원리

Hooks

useEffect 와 useLayoutEffect 차이