Next.JS 렌더링 방식 정리(v12 & v13)
·
개념정리/Next.JS
v13 컴포넌트 수준에서 렌더링 환경을 선택 💡 next 13 이전에는 페이지에 필요한 모든 JS 코드를 하이드레이션 했지만 서버 컴포넌트가 도입된 후에는 클라이언트 컴포넌트만 하이드레이션 하면 된다. → JS 번들의 사이즈가 줄어든다. 📌 클라이언트 컴포넌트 클라이언트 컴포넌트를 사용하면 애플리케이션에 클라이언트 측 인터랙션을 추가할 수 있다. 서버에서 미리 렌더링 되고 클라이언트에서 hydrated 된다. 클라이언트 컴포넌트는 기존의 페이지 라우터의 컴포넌트가 항상 작동하던 방식이다. 작동방식 next.js가 빌드 중에 컴포넌트를 하나씩 확인하다가 클라이언트 컴포넌트를 만남 정적으로 만들 수 있는 부분을 확인 → 정적 HTML 프리렌더링 빌드 시에 클라이언트 컴포넌트도 프리렌더링 되기 때문에 내부의 ..