Vercel 배포 시 캐시를 어떻게 관리하나요?

Q: Vercel 배포 시 캐시 관리는 어떻게 하나요?

A: Vercel은 빌드 및 배포 시 자동으로 효율적인 캐시 관리를 수행하지만, 다음과 같은 방법으로 캐시 동작을 제어하거나 개선할 수 있습니다.

1. 빌드 캐시 자동 관리
- Vercel은 이전 빌드의 산출물을 캐싱하여, 변경되지 않은 부분은 재빌드하지 않고 빠르게 배포합니다.
- 이를 통해 빌드 속도가 향상되고, 리소스 사용이 최적화됩니다.

2. `vercel.json` 설정을 통한 캐시 제어
- `headers` 설정에서 캐시 관련 HTTP 헤더(Cache-Control, ETag 등)를 지정할 수 있습니다.
- 예를 들어, 정적 파일에 대해 캐시 만료 시간을 직접 설정하여 클라이언트 캐싱 동작을 정의할 수 있습니다.

```json
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
]
} ]
}
```

3. `next.config.js`에서 캐시 전략 설정 (Next.js 프로젝트의 경우)
- `next.config.js`에서 `headers` 메서드를 사용해 정적 자원 캐시 정책을 지정 가능하며, ISR(Incremental Static Regeneration) 설정도 캐싱 전략과 관련이 있습니다.
- 정적으로 생성된 페이지를 일정 시간마다 재생성하게 하여 캐시된 콘텐츠의 최신성을 유지할 수 있습니다.

4. 환경변수를 통한 캐시 무효화
- 빌드 시 환경변수를 변경하면 Vercel에서는 새 빌드로 인식하여 전체 재빌드 및 캐시 무효화가 발생합니다.
- 배포 시 캐시를 강제로 클리어하고 싶을 때 환경변수를 하나 추가 또는 변경하는 방법이 있습니다.

5. 수동 캐시 삭제
- Vercel의 웹 대시보드에서는 특별히 캐시를 직접 삭제하는 기능은 없지만, 새 커밋이나 변경 사항 푸시로 강제 새 빌드를 할 수 있습니다.
- 캐시 문제 해결 시에는 빌드 자동화 스크립트 내에서 빌드 디렉터리를 클린하는 방식으로 강제 캐시 무효화를 적용할 수 있습니다.

6. CDN 캐시와 캐싱 정책
- Vercel은 글로벌 CDN을 사용해 배포된 콘텐츠를 전 세계에 캐시합니다.
- 클라이언트-서버, CDN 간 캐싱 정책은 HTTP 헤더를 통해 제어하며, 헤더 설정을 통해 캐시 갱신 주기 등을 조절할 수 있습니다.

요약: Vercel은 빌드 산출물과 CDN 캐싱을 자동 관리하지만, `vercel.json` 또는 애플리케이션 설정에서 HTTP 캐시 헤더를 명시하거나, 빌드 환경 변수 변경 및 빌드 클린 전략을 활용하여 캐시 동작을 세밀하게 제어할 수 있습니다.

Vercel에서 배포 시 캐시 관리는 애플리케이션의 성능 최적화와 관련이 깊습니다.

캐시 관리는 Vercel의 CDN(콘텐츠 전송 네트워크)을 통해 이루어지며, 다음과 같은 방법으로 처리할 수 있습니다.

1. ISR (Incremental Static Regeneration) Vercel은 ISR 기능을 지원하여, 정적 콘텐츠를 자동으로 다시 생성할 수 있습니다.

ISR을 사용하면 페이지를 정적으로 생성한 후, 특정 시간 간격으로 페이지를 다시 생성하여 최신 정보를 반영할 수 있습니다.

```javascript export async function getStaticProps() { const data = await fetchData(); return { props: { data, }, revalidate: 60, // 60초 후에 페이지 재생성 }; } ```

2. 캐시 정책 설정 Vercel은 기본적으로 정적 자산에 대한 캐싱을 제공합니다.

`Headers`를 사용하여 캐시 정책을 정의할 수 있습니다.

예를 들어, API 응답에 대한 캐싱을 관리할 수 있습니다.

```javascript export default function handler(req, res) { res.setHeader('Cache-Control', 'max-age=600'); // 10분 캐시 res.json({ data: 'Hello, World!' }); } ```

3. Revalidate 및 Next.js 리다이렉트 페이지가 업데이트되면, 배포 후 몇 분 이내에 자동으로 사용자에게 새로운 최신 버전이 제공되지 않도록 하는 방법으로 `revalidate`를 사용할 수 있습니다.

이를 통해 특정 페이지를 강제로 업데이트할 수 있습니다.



4. 브라우저 캐시 제어 HTTP 헤더를 사용하여 브라우저 캐싱을 제어할 수 있습니다.

예를 들어, `Cache-Control` 헤더를 설정하여 브라우저가 자산을 캐시하도록 하거나, 캐시를 비활성화할 수 있습니다.



5. 유효성 검사 및 캐시 무효화 배포 후 캐시된 페이지를 무효화하고 싶다면, 해당 리소스의 URL에 쿼리 파라미터를 추가하여 브라우저와 CDN이 이를 새로운 요청으로 인식하게 할 수 있습니다.

예를 들어, `example.com/page?v=1`로 변경하는 방법입니다.



6. Vercel CLI 또는 API를 사용한 배포 Vercel CLI 도구나 API를 사용하여 배포 시 캐시를 수동으로 무효화할 수 있습니다.

Webhook을 설정하여 특정 조건에서 캐시를 무효화할 수 있습니다.



7. 캐시 및 아카이빙을 위한 플러그인 Vercel은 다양한 플러그인을 지원합니다.

예를 들어, 캐시 및 CDN 통합을 위한 플러그인을 사용할 수 있습니다.

마무리 Vercel에서 캐시를 제대로 관리하는 것은 성능 향상과 사용자 경험 개선에 중요합니다.

적절한 시점에 적절한 캐싱 전략을 적용하면 웹 애플리케이션의 응답 속도를 비약적으로 향상시킬 수 있습니다.

배포 전후에 캐시 정책을 세심하게 계획하고 적용하는 것이 좋습니다.