[Nomadcoders] Next.js: 2. Routing

[DaehunGwak]

SSR & CSR

• CSR react 를 통해 javascript 가 dom 에 추가하는 형태 처음에 HTML 내용이 안채워져 있어 SEO 에 안좋을 수 있음

• SSR 서버사이드 렌더링을 통해 html 이 다만들어진 상태에서 클라이언트가 응답을 받게됨 넥스트는 필요한 자바스크립트만 보내줌

Hydration

• 서버사이드 렌더링된 html 이 브라우저에 도착했을 때 react 가 적용되도록 만드는 과정
• 브라우저 사이드에서 리액트 컴포넌트를 적용시켜줌
• "use client" 된 코드만 하이드레이션 진행됨, 그밖의 컨포넌트는 서버사이드에서 미리 컴포넌트화 된상태에서 클라이언트에게 보내줌

use client 가 있든 없든 서버에서 모두 렌더링되어서 클라이언트에게 보내줌, use client 의 가장 큰 특징은 하이드레이션을 적용시킬 것인가 말것인가의 차이