기본적으로 layouts 그리고 pages는 서버 컴포넌트이다. 서버 컴포넌트를 사용하면 데이터를 가져와 서버에서 UI의 일부를 렌더링하고 선택적으로 결과를 캐싱하며 클라이언트로 스트리밍 할 수 있다. 유저와의 상호작용이나 브라우저 API가 필요한 경우 클라이언트 컴포넌트를 사용하여 기능을 계층화 layer in functionality 할 수 있다.

• layer in functionality

서버 및 클라이언트를 함께 구성하는 방법과 함께, Next.js에서 서버 및 클라이언트 컴포넌트가 작동하는 방식, 언제 사용하면 좋을지에 대해 알아보자.

언제 서버 또는 클라이언트 컴포넌트를 사용할까?

클라이언트 환경과 서버 환경은 서로 다른 기능을 갖는다. 사용 사례에 따라 각 환경에서 로직을 실행한다.

클라이언트 컴포넌트를 사용해야 할 때:

• React의 State, hooks 사용
• event handlers (ex.onClick, onChange) 사용
• Lifecycle logic (ex.useEffect) 사용
• Browser APIs 사용

서버 컴포넌트를 사용해야 할 때:

• source에 가까운 database 또는 API에서 데이터를 가져와야 할 때

• 클라이언트에 노출하지 않고(보안), API keys, tokens 등을 기밀로 가져와야 할 때

• 브라우저로 전송되는 JavaScript 양을 줄이고 싶을 때

• FCP(First Contentful Paint) 를 개선하고 클라이언트에 점진적 스트리밍을 원할 때

• 기능 계층화 예시보기