Next Rendering

Server Component

서버 컴포넌트는 서버에서만 렌더링되고, 클라이언트로 전송되기 전에 HTML로 변환된다. 이 컴포넌트는 서버에서만 실행되며, 클라이언트 사이드에서는 실행되지 않는다.

Next에서는 서버 컴포넌트가 기본값으로 설정되어 있다.

서버 컴포넌트는 Next.js의 서버에서 렌더링되기에 async를 이용한 비동기 컴포넌트를 만들수 있다.
이때 서버 컴포넌트이면 useState와 같은 hooks를 사용할 수 없다.

장점

• 성능 개선: 클라이언트 사이드에서 JavaScript를 실행할 필요가 없기 때문에, 페이지 로딩 시간이 줄어든다.
• 데이터 페칭 최적화: 서버 사이드에서 데이터를 페칭하고, 이를 HTML로 렌더링하여 클라이언트에 전송하기 때문에, 데이터 관련 처리가 최적화된다.
• 보안: 클라이언트 사이드 코드가 없기 때문에, 민감한 정보가 클라이언트로 노출될 위험이 줄어든다.

단점

• 동적 인터랙션 부족: 클라이언트 사이드에서 실행되는 로직이 없기 때문에, 사용자 인터랙션에 대한 동적 처리가 제한된다.
• 실시간 업데이트 제한: 클라이언트 사이드에서 데이터를 실시간으로 업데이트하기 어렵다.

Client Component

클라이언트 컴포넌트는 클라이언트 사이드에서 렌더링되며, 동적인 사용자 인터랙션과 상태 관리를 위해 사용된다.

useState와 같은 hooks를 사용하기 위해 클라이언트 컴포넌트로 변경해주어야 하며 클라이언트 컴포넌트로 변경하는 방법은 파일의 최상단에 'use client'를 작성해주면 된다.

장점

• 동적 인터랙션: 사용자의 입력과 상호작용에 따라 동적으로 컨텐츠를 업데이트할 수 있다.
• 실시간 데이터 처리: WebSocket과 같은 기술을 활용하여 실시간 데이터 페칭과 업데이트가 가능하다.

단점

• 성능 저하: 모든 JavaScript가 클라이언트 사이드에서 로드되고 실행되기 때문에, 페이지 로딩 시간이 길어질 수 있다.

주의해야할 점

서버 컴포넌트는 클라이언트 컴포넌트를 import해서 사용할 수 있다.
물론 클라이언트 컴포넌트도 서버 컴포넌트를 import해서 사용할 수 있지만,
만약 클라이언트 컴포넌트에서 서버 컴포넌트를 import하게 되면 서버 컴포넌트가 클라이언트 컴포넌트로 오염된다.

참고
Building Your Application: Rendering | Next.js
Next + React Query로 SNS 서비스 만들기