서버 컴포넌트에서 데이터 페칭

// src/app/users/page.tsx (새로 생성할 페이지)

interface User {
  id: number;
  name: string;
  email: string;
}

// 이 함수는 서버에서 실행됩니다.
async function getUsers(): Promise<User[]> {
  // fetch API를 사용하여 외부 API에서 사용자 데이터를 가져옵니다.
  const res = await fetch('https://jsonplaceholder.typicode.com/users');

  // 응답이 성공적이지 않으면 에러를 던집니다.
  if (!res.ok) {
    // throw new Error('Failed to fetch users'); // 실제 서비스에서는 더 구체적인 에러 처리 필요
    return []; // 예시를 위해 빈 배열 반환
  }

  // JSON 형태로 파싱하여 반환합니다.
  return res.json();
}

// 페이지 컴포넌트를 async 함수로 정의합니다.
export default async function UsersPage() {
  const users = await getUsers(); // 서버에서 데이터를 비동기적으로 가져옵니다.

  return (
    <div>
      <h1>사용자 목록</h1>
      {users.length > 0 ? (
        <ul>
          {users.map((user) => (
            <li key={user.id} style={{ marginBottom: '10px' }}>
              <strong>{user.name}</strong> ({user.email})
            </li>
          ))}
        </ul>
      ) : (
        <p>사용자 데이터를 불러오는 데 실패했거나 데이터가 없습니다.</p>
      )}
    </div>
  );
}

// src/app/revalidated-data/page.tsx (새로 생성할 페이지)

interface Product {
  id: number;
  name: string;
  price: number;
  timestamp: string; // 데이터가 언제 페칭되었는지 확인하기 위함
}

async function getProducts(): Promise<Product[]> {
  const res = await fetch('https://api.example.com/products', { // 실제 API 주소로 변경
    // 이 데이터를 10초마다 서버에서 다시 가져오도록 설정
    next: { revalidate: 10 },
  });

  if (!res.ok) {
    return [];
  }

  const products = await res.json();
  // 현재 페칭 시점의 타임스탬프 추가 (확인용)
  return products.map((p: any) => ({ ...p, timestamp: new Date().toLocaleTimeString() }));
}

export default async function RevalidatedPage() {
  const products = await getProducts();

  return (
    <div>
      <h1>재검증되는 상품 목록</h1>
      <p>이 데이터는 <strong>10초</strong>마다 서버에서 다시 가져와집니다.</p>
      <p>마지막 페칭 시간: <strong>{products[0]?.timestamp || 'N/A'}</strong></p>
      <ul>
        {products.map((p) => (
          <li key={p.id}>{p.name} - ${p.price}</li>
        ))}
      </ul>
      <p>
        팁: 페이지를 새로고침하면 (하드 새로고침 아님) 10초 이내에는 캐시된 데이터가 보이고, 10초 후에는 새로운 데이터로 업데이트됩니다.
      </p>
    </div>
  );
}

// src/app/users/[id]/page.tsx (새로 생성할 페이지)

interface UserDetailPageProps {
  params: {
    id: string; // URL에서 추출될 사용자 ID
  };
}

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  phone: string;
  website: string;
}

// 특정 사용자 데이터를 가져오는 함수
async function getUser(id: string): Promise<User> {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!res.ok) {
    throw new Error('Failed to fetch user');
  }
  return res.json();
}

// SSG를 위해 빌드 시 어떤 ID를 미리 생성할지 정의 (선택 사항)
export async function generateStaticParams() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users: User[] = await res.json();

  return users.map((user) => ({
    id: user.id.toString(),
  }));
}

export default async function UserDetailPage({ params }: UserDetailPageProps) {
  const { id } = params;
  const user = await getUser(id); // 서버에서 특정 사용자 데이터 페칭

  return (
    <div>
      <h1>사용자 상세 정보</h1>
      <h2>{user.name} (@{user.username})</h2>
      <p>이메일: {user.email}</p>
      <p>전화: {user.phone}</p>
      <p>웹사이트: <a href={`http://${user.website}`} target="_blank" rel="noopener noreferrer">{user.website}</a></p>
      <Link href="/users"><a>목록으로 돌아가기</a></Link>
    </div>
  );
}

// src/lib/api.ts (새로 만들 파일)
import { cache } from 'react';

interface Post { /* ... */ }

// 이 함수는 Next.js의 캐싱 메커니즘을 활용하여 동일한 호출에 대해 중복 요청을 방지합니다.
export const getPostsCached = cache(async () => {
  console.log('Fetching posts from API...'); // 이 로그는 한 번만 찍힙니다.
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
});

export const getPostCached = cache(async (id: string) => {
  console.log(`Fetching post ${id} from API...`); // 이 로그도 각 id별로 한 번만 찍힙니다.
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  return res.json();
});

// src/app/blog/page.tsx (기존 또는 새로 만들 페이지)
import Link from 'next/link';
import { getPostsCached } from '../../lib/api'; // 캐시된 함수 임포트

export default async function BlogPage() {
  const posts = await getPostsCached(); // 여기에서 한 번 호출

  return (
    <div>
      <h1>블로그 게시물</h1>
      <ul>
        {posts.map((post: any) => (
          <li key={post.id}>
            <Link href={`/blog/${post.id}`}><a>{post.title}</a></Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

// src/app/blog/[id]/page.tsx (기존 또는 새로 만들 페이지)
import { getPostCached } from '../../../lib/api'; // 캐시된 함수 임포트

interface PostDetailPageProps {
  params: { id: string };
}

export default async function BlogDetailPage({ params }: PostDetailPageProps) {
  const post = await getPostCached(params.id); // 여기에서 또 호출하지만, 동일 id면 캐시 사용

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <Link href="/blog"><a>목록으로 돌아가기</a></Link>
    </div>
  );
}