[next.js]"use client", 클라이언트vs서버 컴포넌트

Next  기본 동작 방식

서버에서 데이터를 받아와서 클라이언트로 전달 => 클라이언트가 이를 화면에 렌더링 

클라이언트 컴포넌트

• 브라우저에서 실행되며, 사용자와의 상호작용을 처리
• 상태(state) 관리와 효과(effect) 훅을 사용할 수 있음
• 이벤트 핸들링이 가능
• 필요에 따라 서버에서도 초기 렌더링이 이루어짐
  단, 클라이언트에서만 실행해야 하는 코드(ex:window 객체나 DOM조작)가 있다면 에러 발생가능
• 비동기로 데이터를 가져오거나 렌더링해야할 때 로딩 상태를 처리할수 있도록 Suspense로 감싸줘야함

// 클라이언트 컴포넌트
"use client";

import { useState } from 'react';

function ClientComponent() {
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>Count: {count}</button>
        </div>
    );
}

//위에 클라이언트 컴포넌트를 임포트할때
export default function Layout({...}){
	return (
       ...
       <Suspense fallback={<div>Loading...</div>}>
          <ClientComponent />
       </Suspense>
       ...
    )
}

서버 컴포넌트

• 서버 실행 시간(npm run start)에 데이터를 가져오고 렌더링함
• 정적 HTML, 동적 데이터 처리를 동시에 지원
• 주로 데이터베이스와의 상호작용이나 API 호출 등 서버 측 로직을 처리
• 캐싱⭕ : cache : 'force-cache'
  🎈 데이터 요청 →   Data Cache에 저장 → Request Memoization 최적화 → Full Route Cache로 정적 HTML 생성 → 사용자에게 반환
• 캐싱❌ : cache : 'no-store'
  🎈 데이터 요청 → 캐싱 없이(위에 force-cache의 과정없이) 실시간 데이터 반환 → 사용자에게 바로 전달

// 서버 컴포넌트
function ServerComponent() {
    const data = fetchData(); // 서버에서 데이터 가져오기
    
    return (
        <div>
            <h1>Data: {data}</h1>
        </div>
    );
}

next 공식문서