Next.js에서 페이지와 컴포넌트를 렌더링하는 방식

• Next.js는 서버에서 모든 페이지와 컴포넌트를 초기 상태로 렌더링하고 HTML을 생성하여 사용자에게 전달한다
• 그 후 클라이언트 측에서 React 애플리케이션이 초기화되어 버튼이나 링크 같은 요소들이 인터랙티브하게 변환된다
• 하지만 모든 컴포넌트가 클라이언트에서 하이드레이트되는 것은 아니다
• 컴포넌트 상단에 use client 지시어가 있는 컴포넌트들만 클라이언트에서 하이드레이션되어 인터랙티브하게 동작한다
• use client 지시어가 없는 컴포넌트는 서버에서만 렌더링되고, 클라이언트에서는 단순한 HTML로 남아 있게 된다
• 이는 사용자가 다운로드해야 할 자바스크립트의 양을 줄여 페이지 로딩 속도를 향상시킨다
• 컴포넌트에서 useState나 onClick 같은 인터랙티브한 기능을 사용하려면 use client 지시어를 추가해야 하며, 그렇지 않으면 프레임워크가 오류를 발생시켜 해당 컴포넌트가 클라이언트에서 인터랙티브하게 동작해야 함을 알려준다
• 서버 컴포넌트는 use client 지시어가 없는 모든 컴포넌트를 의미하며, 서버에서만 렌더링되고 클라이언트에서 하이드레이션되지 않는다
• 이 방식은 데이터 패칭(data fetching)에도 큰 이점을 제공하며, 기존에 사용하던 useQuery, React Query, swr, useState, useEffect 등의 사용을 줄여준다
• 결론적으로, 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 활용하면 성능과 사용자 경험을 모두 향상시킬 수 있다