Next.js에서 Server Component와 Client Component는 어떻게 다른가요?

// 모든 컴포넌트에 'use client'를 붙이는 경우
// 데이터 fetch만 하는 컴포넌트인데도 클라이언트로 선언하고 있습니다.
'use client';

import { useEffect, useState } from 'react';

export default function ArticleList() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch('/api/articles')
      .then((res) => res.json())
      .then((data) => setArticles(data));
  }, []);

  return (
    <ul>
      {articles.map((a) => (
        <li key={a.id}>{a.title}</li>
      ))}
    </ul>
  );
}

// Server Component — 데이터를 서버에서 직접 fetch합니다.
// 'use client' 선언 없음 = 기본적으로 Server Component

async function getArticles() {
  const res = await fetch('https://api.example.com/articles', {
    cache: 'no-store', // 또는 { next: { revalidate: 60 } }
  });
  return res.json();
}

export default async function ArticleList() {
  const articles = await getArticles(); // async/await 직접 사용 가능

  return (
    <ul>
      {articles.map((a) => (
        <li key={a.id}>
          {a.title}
          <LikeButton id={a.id} /> {/* 상호작용이 필요한 부분만 Client Component */}
        </li>
      ))}
    </ul>
  );
}

// Client Component — 상호작용이 필요한 부분만 'use client' 선언
'use client';

import { useState } from 'react';

export function LikeButton({ id }: { id: string }) {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked((prev) => !prev)}>
      {liked ? '좋아요 취소' : '좋아요'}
    </button>
  );
}