# Vercel 캐시 분석 및 해결 방법

## 캐시 상태 확인 결과

### 응답 헤더 분석

```bash
curl -sI "https://www.planitai.co.jp/blogs"
```

**결과:**
```
x-vercel-cache: HIT          ← 캐시된 버전 제공 중!
age: 1                       ← 캐시가 1초 전에 생성됨
cache-control: public, max-age=0, must-revalidate
etag: "o3wf3mkelgo4p"
server: Vercel
```

## 문제 진단

### ❌ 현재 상황
- **Vercel Cache Status**: `HIT` (캐시 사용 중)
- **로컬 빌드**: Post 22 포함 ✅
- **Vercel 배포**: Post 22 없음 (구 캐시 제공)

### 원인
Vercel의 **Edge Cache**가 이전 빌드의 정적 파일을 캐시하고 있어서, 새로운 배포가 완료되어도 사용자에게 구 버전이 표시됨.

## Vercel 캐시 종류

### 1. Edge Cache (CDN)
- **위치**: Vercel의 Edge Network (전 세계 CDN)
- **대상**: HTML, CSS, JS 등 정적 파일
- **헤더**: `x-vercel-cache: HIT/MISS`
- **문제**: 현재 이 캐시가 구 버전 제공 중

### 2. Build Cache
- **위치**: Vercel 빌드 서버
- **대상**: node_modules, .next 디렉토리
- **확인**: 배포 로그에서 "Using build cache" 메시지

### 3. Data Cache (Next.js)
- **위치**: Vercel 서버
- **대상**: fetch(), unstable_cache() 결과
- **제어**: revalidateTag(), revalidatePath()

## Vercel 캐시 확인 방법

### 1. 응답 헤더 확인 (가장 정확)

```bash
# /blogs 페이지 캐시 상태
curl -sI "https://www.planitai.co.jp/blogs" | grep -i "x-vercel-cache"

# 결과 해석:
# x-vercel-cache: HIT  → 캐시 사용 (구 버전일 수 있음)
# x-vercel-cache: MISS → 새로 생성 (최신 버전)
# x-vercel-cache: STALE → 오래된 캐시 (재검증 필요)
```

### 2. 브라우저 개발자 도구

1. F12 → Network 탭
2. 페이지 새로고침 (Ctrl+R)
3. 문서 요청 클릭
4. Response Headers 확인
   - `x-vercel-cache: HIT/MISS`
   - `age: N` (캐시 생성 후 경과 시간)

### 3. ETag 비교

```bash
# ETag 확인 (파일 버전 식별자)
curl -sI "https://www.planitai.co.jp/blogs" | grep -i etag

# 같은 ETag = 같은 버전
# 다른 ETag = 다른 버전
```

### 4. Vercel Dashboard

1. https://vercel.com/dashboard 접속
2. 프로젝트 선택
3. **Deployments** 탭
4. 최신 배포 클릭
5. **Logs** 확인:
   - "Using build cache" → 빌드 캐시 사용
   - "Restored cached build" → 캐시 복원

### 5. 배포 시간 확인

```bash
# 응답 헤더에서 배포 시간 추정
curl -sI "https://www.planitai.co.jp/blogs" | grep -i date

# 로컬 시간과 비교
date
```

## 캐시 무효화 방법

### 방법 1: Revalidate API 호출 (시도함 - 실패)

```bash
curl "https://www.planitai.co.jp/api/revalidate?secret=LWCTd22HKmCa8uNqOvaoTYlXoNONFVlhx"
```

**문제**: 이것은 Next.js Data Cache만 무효화하고, Vercel Edge Cache는 무효화하지 않음.

### 방법 2: Vercel Dashboard에서 캐시 삭제 (권장)

#### A. 전체 캐시 삭제
1. Vercel Dashboard → 프로젝트 선택
2. **Settings** → **Data Cache** (또는 **Caching**)
3. **Purge Everything** 클릭
4. 확인

#### B. 특정 경로 캐시 삭제
1. Vercel Dashboard → 프로젝트 선택
2. **Settings** → **Data Cache**
3. **Purge by Path** 입력: `/blogs`
4. **Purge** 클릭

### 방법 3: 강제 재배포 (가장 확실)

```bash
cd /var/www/tkim.planitai.co.jp/blog/PlanitAI_Inc_website/nextjs
git commit --allow-empty -m "chore: force redeploy to clear all caches"
git push
```

Vercel Dashboard에서:
1. **Deployments** → 최신 배포 선택
2. 우측 메뉴 (⋮) → **Redeploy**
3. **Use existing Build Cache** 체크 **해제**
4. **Redeploy** 클릭

### 방법 4: 쿼리 파라미터 추가 (임시 확인용)

```bash
# 캐시 우회하여 최신 버전 확인
curl -s "https://www.planitai.co.jp/blogs?nocache=$(date +%s)" | grep -o "AIと共に働くということ"
```

브라우저에서:
```
https://www.planitai.co.jp/blogs?v=123
```

### 방법 5: 하드 리프레시 (사용자 브라우저 캐시)

- **Chrome/Edge**: Ctrl + Shift + R (Windows), Cmd + Shift + R (Mac)
- **Firefox**: Ctrl + F5 (Windows), Cmd + Shift + R (Mac)
- **시크릿 모드**: 브라우저 캐시 완전 무시

## 배포 후 캐시 전파 시간

| 캐시 종류 | 무효화 방법 | 전파 시간 |
|----------|------------|---------|
| **Edge Cache** | Purge Everything | 즉시~2분 |
| **Build Cache** | Redeploy (no cache) | 즉시 |
| **Data Cache** | revalidateTag() | 즉시~30초 |
| **Browser Cache** | Hard Refresh | 즉시 |
| **CDN Cache** | 자동 만료 | max-age 설정값 |

## 현재 상황에 맞는 해결책

### 즉시 실행 (권장 순서)

#### 1단계: Vercel Cache Purge
```
Vercel Dashboard → Settings → Data Cache → Purge Everything
```

#### 2단계: 30초 대기 후 확인
```bash
sleep 30
curl -sI "https://www.planitai.co.jp/blogs" | grep "x-vercel-cache"
# 결과: MISS 또는 HIT (age: 작은 숫자)
```

#### 3단계: Post 22 확인
```bash
curl -s "https://www.planitai.co.jp/blogs" | grep -o "AIと共に働くということ"
```

#### 4단계: 실패 시 강제 재배포
```bash
# Vercel Dashboard에서 Redeploy (빌드 캐시 사용 안 함)
```

## 캐시 정책 개선 (향후)

### next.config.ts 수정

```typescript
const nextConfig = {
  // 정적 페이지 재검증 시간 설정
  experimental: {
    staleTimes: {
      dynamic: 30, // 동적 페이지: 30초
      static: 180, // 정적 페이지: 3분
    },
  },
};
```

### 페이지별 재검증 설정

```typescript
// app/blogs/page.tsx
export const revalidate = 60; // 60초마다 재생성
```

### fetch 옵션 명시

```typescript
// lib/api.ts
const res = await fetch(`${apiBase}/posts?_embed&per_page=100`, {
  next: { revalidate: 60 } // 60초 캐시
});
```

## 모니터링

### 캐시 상태 확인 스크립트

```bash
#!/bin/bash
# check-vercel-cache.sh

echo "=== Vercel Cache Status ==="
echo ""
echo "1. /blogs page:"
curl -sI "https://www.planitai.co.jp/blogs" | grep -E "(x-vercel-cache|age|etag)"
echo ""
echo "2. Post 22 present:"
curl -s "https://www.planitai.co.jp/blogs" | grep -q "AIと共に働くということ" && echo "✅ YES" || echo "❌ NO"
echo ""
echo "3. Timestamp:"
date
```

사용법:
```bash
chmod +x check-vercel-cache.sh
./check-vercel-cache.sh
```

## 참고 링크

- [Vercel Caching Documentation](https://vercel.com/docs/concepts/edge-network/caching)
- [Next.js Data Fetching](https://nextjs.org/docs/app/building-your-application/data-fetching)
- [Vercel Cache Headers](https://vercel.com/docs/edge-network/headers#cache-control-header)

---

**작성일**: 2025-11-27
**현재 상태**: Edge Cache HIT (구 버전 제공 중)
**해결 방법**: Vercel Dashboard에서 Purge Everything