모던 리액트 + Next.js #4 데이터 페칭과 캐싱

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    let cancelled = false;
    setLoading(true);
 
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => { if (!cancelled) setUser(data); })
      .catch(err => { if (!cancelled) setError(err.message); })
      .finally(() => { if (!cancelled) setLoading(false); });
 
    return () => { cancelled = true; };
  }, [userId]);
 
  if (loading) return <p>로딩 중...</p>;
  if (error) return <p>에러: {error}</p>;
  return <p>{user.name}</p>;
}

export default async function UserProfile({ params }) {
  const { userId } = await params;
  const user = await fetch(`https://api.example.com/users/${userId}`)
    .then(res => res.json());
 
  return <p>{user.name}</p>;
}

import { db } from '@/lib/db';
 
export default async function PostPage({ params }) {
  const { slug } = await params;
  const post = await db.query('SELECT * FROM posts WHERE slug = $1', [slug]);
 
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

import fs from 'fs';
import path from 'path';
 
export default async function PostPage({ params }) {
  const { slug } = await params;
  const filePath = path.join(process.cwd(), 'posts', `${slug}.mdx`);
  const content = fs.readFileSync(filePath, 'utf-8');
  // ... MDX 컴파일 ...
}

async function getUser(id) {
  return fetch(`/api/users/${id}`).then(r => r.json());
}
 
export default async function Page() {
  const userA = await getUser(1);  // 실제 호출
  const userB = await getUser(1);  // 캐시에서 가져옴 (자동)
  // ...
}

// 1. 영구 캐시 (정적 데이터, 거의 안 바뀜)
fetch(url, { cache: 'force-cache' });
 
// 2. 캐시 안 함 (매번 새로 요청)
fetch(url, { cache: 'no-store' });
 
// 3. N초마다 재검증 (자주 바뀌는 데이터)
fetch(url, { next: { revalidate: 60 } });
 
// 4. 태그 기반 재검증 (수동 무효화 가능)
fetch(url, { next: { tags: ['posts'] } });

export const revalidate = 60;  // 이 페이지 전체를 60초마다 재생성
 
export default async function PostsPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return /* ... */;
}

export const dynamic = 'force-dynamic';  // 매 요청마다 새로 렌더 (캐시 안 함)

const user = await getUser(id);     // 100ms 소요
const posts = await getPosts(id);   // 또 100ms — 총 200ms

const [user, posts] = await Promise.all([
  getUser(id),
  getPosts(id),
]);
// 둘이 동시에 시작 → 100ms (가장 느린 쪽 기준)

export default async function UserPage({ params }) {
  const { id } = await params;
  return (
    <div>
      <UserHeader userId={id} />
      <UserPosts userId={id} />
    </div>
  );
}
 
async function UserHeader({ userId }) {
  const user = await getUser(userId);
  return <h1>{user.name}</h1>;
}
 
async function UserPosts({ userId }) {
  const posts = await getPosts(userId);
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

'use client';
 
export default function ErrorBoundary({ error, reset }) {
  return (
    <div style={{ padding: '24px' }}>
      <h2>문제가 발생했습니다.</h2>
      <p>{error.message}</p>
      <button onClick={reset}>다시 시도</button>
    </div>
  );
}

export default async function RepoPage({ params }) {
  const { owner, repo } = await params;
 
  const data = await fetch(
    `https://api.github.com/repos/${owner}/${repo}`,
    { next: { revalidate: 300 } }  // 5분 캐시
  ).then(res => {
    if (!res.ok) throw new Error('Repo not found');
    return res.json();
  });
 
  return (
    <div style={{ padding: '24px' }}>
      <h1>{data.full_name}</h1>
      <p>{data.description}</p>
      <ul>
        <li>⭐ {data.stargazers_count.toLocaleString()}</li>
        <li>🍴 {data.forks_count.toLocaleString()}</li>
        <li>👁 {data.watchers_count.toLocaleString()}</li>
        <li>주 언어: {data.language}</li>
      </ul>
      <a href={data.html_url} target="_blank" rel="noopener">GitHub에서 보기</a>
    </div>
  );
}

'use client';
 
export default function ErrorBoundary({ error, reset }) {
  return (
    <div style={{ padding: '24px' }}>
      <h2>저장소를 찾을 수 없습니다</h2>
      <p style={{ color: '#888', fontSize: '14px' }}>{error.message}</p>
      <button onClick={reset}>다시 시도</button>
    </div>
  );
}

import Link from 'next/link';
 
export default function HomePage() {
  return (
    <div style={{ padding: '24px' }}>
      <h1>GitHub 저장소 보기</h1>
      <ul>
        <li><Link href="/repos/facebook/react">facebook/react</Link></li>
        <li><Link href="/repos/vercel/next.js">vercel/next.js</Link></li>
        <li><Link href="/repos/curtisdev/this-does-not-exist">존재하지 않는 저장소</Link></li>
      </ul>
    </div>
  );
}