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

npx json-server --watch db.json --port 4000

interface User {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
}

// 이 함수는 서버에서 실행됩니다.
async function getUsers(): Promise<User[]> {
  // fetch API를 사용하여 로컬 mock API에서 사용자 데이터를 가져옵니다.
  const res = await fetch('http://localhost:4000/users?_limit=20');

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

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

// 페이지 컴포넌트를 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.firstName} {user.lastName}</strong> ({user.email})
            </li>
          ))}
        </ul>
      ) : (
        <p>사용자 데이터를 불러오는 데 실패했거나 데이터가 없습니다.</p>
      )}
    </div>
  );
}

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

async function getProducts(): Promise<Product[]> {
  const res = await fetch('http://localhost:4000/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>
  );
}

import Link from 'next/link';

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

interface User {
  id: number;
  firstName: string;
  lastName: string;
  username: string;
  email: string;
  phone: string;
  domain: string;
}

// 특정 사용자 데이터를 가져오는 함수
async function getUser(id: string): Promise<User> {
  const res = await fetch(`http://localhost:4000/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('http://localhost:4000/users?_limit=20');
  const payload = await res.json();
  const users: User[] = payload;

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

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

  return (
    <div>
      <h1>사용자 상세 정보</h1>
      <h2>{user.firstName} {user.lastName} (@{user.username})</h2>
      <p>이메일: {user.email}</p>
      <p>전화: {user.phone}</p>
      <p>
        도메인: {user.domain ? (
          <a href={`https://${user.domain}`} target="_blank" rel="noopener noreferrer">{user.domain}</a>
        ) : '-'}
      </p>
      <Link href="/users">목록으로 돌아가기</Link>
    </div>
  );
}

import { cache } from 'react';
import { db } from './db';

export const getUser = cache(async (id: string) => {
  console.log('query user', id);
  return db.user.findUniqueOrThrow({ where: { id } });
});

import { getUser } from '@/lib/users';

async function UserSummary({ id }: { id: string }) {
  const user = await getUser(id);
  return <h1>{user.name}</h1>;
}

async function UserPermissions({ id }: { id: string }) {
  const user = await getUser(id);
  return <p>권한: {user.role}</p>;
}

export default async function UserPage({
  params,
}: PageProps<'/users/[id]'>) {
  const { id } = await params;

  return (
    <>
      <UserSummary id={id} />
      <UserPermissions id={id} />
    </>
  );
}