검색 로직 구현과 트러블 슈팅

🔍 검색 기능 구현

1. Route Handler를 사용하여 API 키 관리 🔐

장점:

• 🔑 API 키를 서버 사이드에서 안전하게 관리
• 🔒 외부 API 호출을 서버에서 처리하여 보안 강화
• ⚡ Next.js의 캐싱 기능으로 성능 최적화

---

2. React Query로 상태 관리 분리 💬

장점:

• 🔄 데이터 페칭 로직을 커스텀 훅으로 분리하여 재사용성 향상
• 🧑‍💻 React Query의 캐싱 기능으로 중복 요청 방지
• 🚀 로딩/에러 상태를 자동으로 관리
• 📉 컴포넌트 코드 복잡도 감소

---

🚨 트러블 슈팅

1. 라우터 핸들러? 서버 액션? 🤔

처음엔 Server Action으로 구현했는데, Route Handler로 바꾸면서 둘의 차이점이 궁금했다.

결론:

현재 구현에는 Route Handler가 더 적합하다.

Route Handler 선택 이유 🤖

1. 데이터 조회 중심 작업 📊

• 주로 Read 작업
• 복잡한 상태 변경 없음
• HTTP GET 메서드 활용

2. 캐싱 🔄

• CDN 활용 가능

---

📌 주요 차이점

1. API 엔드포인트

• Route Handler: REST API 제공, 외부 접근 가능
• Server Action: 내부 함수로만 사용

2. 용도와 목적

• 라우트 핸들러: RESTful API 구현, HTTP 메서드 기반 (GET, POST 등), 헤더 및 상태 코드 제어

  export async function GET(request: NextRequest) {
      return Response.json(data, {
        status: 200,
        headers: {
          'Cache-Control': 'public, max-age=86400'
        }
      });
  }

• 서버 액션: 폼 처리에 최적화, 서버-클라이언트 간 직접 통신

  'use server'
  async function handleSubmit(formData: FormData) {
    // 폼 처리 로직
  }

3. 캐싱 전략

• 라우트 핸들러: Route Cache, CDN 캐싱 가능

  const res = await fetch(apiUrl, {
      next: { revalidate: 86400 }
  });

• 서버 액션: Request Memoization, CDN 캐싱 불가

  const cachedData = cache(async () => {
    const res = await fetch(apiUrl);
    return res.json();
  });

4. 에러 처리

• 라우트 핸들러: HTTP 상태 코드로 에러 전달, 구조화된 에러 응답

  if (!res.ok) {
      return Response.json(
        { error: '데이터 조회 실패' },
        { status: 500 }
      );
  }

• 서버 액션: JavaScript 에러 throw, try-catch로 처리

  try {
      const data = await getCampingData();
  } catch (error) {
      throw new Error('데이터 조회 실패');
  }

Server Action이 적합한 경우

• 폼 제출 관리
• 즉각적인 상태 업데이트

추가로 알게 된 사실

• 캐시 범위 🌐
  • Route Handler: HTTP 캐시, CDN 캐시 활용 가능
  • Server Action: React 캐시, Request 캐시에 한정

---

CDN (Content Delivery Network)

작동 방식 ⚙️

1. 사용자가 컨텐츠 요청
2. 가장 가까운 CDN 서버로 라우팅
3. CDN 서버에 캐시된 컨텐츠 제공
4. 캐시가 없는 경우 원본 서버에서 가져옴

---

2. 중복되어 보이는 캐싱 로직 🔄

Route Handler에서도 캐싱하는 코드, React Query에서도 캐싱하는 코드가 중복되어 보이는데 문제가 없을까?

결론:

둘 다 캐싱을 유지하는 것이 권장된다.

이유 🧐

Next.js의 revalidate와 React Query의 staleTime 캐싱은 서로 다른 레벨에서 동작한다.

• 서버 사이드 캐싱 (revalidate)
  서버에서 외부 API 응답을 캐시하여 서버 부하를 줄임

• 클라이언트 사이드 캐싱 (staleTime)
  브라우저에서 데이터를 캐시하여 사용자 경험을 개선

두 캐싱 전략은 각기 다른 레벨에서 작동하며, 함께 사용될 때 최적의 성능과 사용자 경험을 제공한다.
자주 변경되지 않는 데이터(예: 캠핑장 데이터)의 경우, 이러한 이중 캐싱 전략이 매우 효과적이다.