리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.
- React는 Framework이고, Next.js Library이다. 이 차이점은 주도권을 누가 갖고 있냐는 것이다.
- React는 우리가 모든 것을 직접 생성하고 설정 해야하지만, Next.js는 정해진 규칙에 따라 코드만 작성하면 된다.
- 그리고 가장 큰 차이점은 CSR 방식이냐 SSR 방식이냐 하는 차이이다.
- CSR과 SSR은 유저가 브라우저에서 보는 화면인
UI를 어디서 만드는가에 따라 구분된다. - React는 CSR(Client-Side-Rendering) 방식으로 클라이언트에서 UI가 만들어지고
- Next.js는 SSR(Server-Sied-Rendering) 방식으로 서버에서 UI 화면을 구성한다.
Next.js에서 SSR을 실행하는 과정과 hydration에 대해 설명해 주세요.
- 유저가 브라우저를 통해 사이트 접속
- 서버에서 React 실행
- React는 UI를 렌더링
- 렌더링된 결과를 통해 브라우저에게 HTML 제공
- 유저는 브라우저에게 HTML 제공된 시점에서 화면을 보게된다.
- 이후 브라우저는 JS 파일을 다운받고 실행, 이제부터는 리액트와 같이 CSR 방식으로 동작하는데 이것을
hydration이라고 한다.
- hydration
- 리액트 코드가 브라우저에 이미 존재하는 HTML과 동기화하여 앱이 동적으로 상호작용할 수 있는 과정
해보고 싶은거 하기