JS Bundle은 브라우저에서 필요로 하는 상호작용을 가능하게 하는 Javascript 기능을 담고있다.

이를 정적 HTML 페이지에 연결해 유저가 상호작용할 수 있게 한다.

<aside> 🌀

기존 Page Router 방식에서는-

React Hook, 이벤트 핸들러 등 상호작용이 없는 페이지에 대해서도 JS Bundle을 생성하는 바람에-

• JS번들 크기가 커지고,
• Hydration이 늦어지고,
• 브라우저에서 한번 더 실행하는 등,

리소스가 낭비되는 경우가 있었다.

</aside>

➕ SSG에서도 JS Bundle이 필요한지?

<aside> 💡

화면 상 나타나는 내용이 변경되지 않고, 어떤 상호작용도 없는 페이지가 아니라면 Hydration을 위해 필요하다.

(form 제출, 버튼 클릭, 애니메이션 등)

</aside>

Client Component

• 브라우저에서 클라이언트 측에서 실행되는 컴포넌트.
• React의 기존 방식처럼 상태 관리, 이벤트 핸들링 등 브라우저 상호작용에 필요한 기능을 제공.
• 컴포넌트 최상단에 "use client" 지시자를 추가해야 클라이언트 컴포넌트로 동작한다.