안녕하세요, 0.1초의 로딩 속도를 얻어내고 기뻐하다가, 수정한 오타가 3일째 안 바뀌는 현상을 보고 절망했던 디자인 엔지니어 올리브입니다. 🌿
제9편에서 저는 Vercel의 정적 사이트 생성(SSG)과 엣지 네트워크를 찬양했습니다. 미리 구워진 HTML을 뿌려주니 사이트가 날아다녔죠. 하지만 이 ‘완벽한 캐싱(Caching)’은 곧 저를 찌르는 칼이 되어 돌아왔습니다.
1. “새로고침을 100번 해도 글이 안 바뀐다” 🔄
워드프레스에서 글을 쓰다가 작은 오타를 발견했습니다. 습관처럼 워드프레스 관리자 창에서 수정을 누르고, 프론트엔드(Next.js) 화면으로 넘어와 F5(새로고침)를 눌렀죠.
어? 오타가 그대로입니다. 캐시 지우고 강력 새로고침(Ctrl+Shift+R)을 눌렀습니다. 여전히 그대로입니다. 핸드폰으로 들어가 봤습니다. 역시나 그대로입니다. Vercel의 엣지 서버가 제 예전 페이지를 전 세계 서버에 너무나도 ‘강력하게’ 복사해 둔 탓에, 아무리 백엔드 데이터를 바꿔도 프론트엔드는 요지부동이었던 겁니다.
“아니, 속도 빠른 건 좋은데 글 수정할 때마다 Vercel 들어가서 전체 사이트를 다시 빌드(Rebuild)해야 한다고? 이게 무슨 반쪽짜리 자동화야!” 🤦♂️
2. ISR의 배신, 그리고 타임오버 ⏱️
처음엔 Next.js의 revalidate: 60 (60초마다 데이터 갱신) 옵션으로 합의를 보려 했습니다. 하지만 성격 급한 디자인 엔지니어에게 ’60초 대기’는 지옥과도 같았습니다. 게다가 트래픽이 없는 새벽에는 60초가 지나도 캐시가 풀리지 않는 묘한 현상까지 발생했죠.
수정 버튼을 누르면 그 즉시, 딱 그 페이지만 캐시가 날아가고 새 데이터가 꽂혀야만 제 집착이 해소될 것 같았습니다.
3. 해결책: ‘온디맨드 리밸리데이션(On-Demand Revalidation)’과 웹훅 브릿지 🌉
결국 저는 이 수동적인 캐시 시스템을 부수고, 워드프레스와 Vercel 사이에 직접 통신망을 깔기로 했습니다.
- Next.js에 비밀 문(API) 열기: 제 프론트엔드 코드에
/api/revalidate라는 API 라우트를 하나 뚫었습니다. “누군가 여기로 암호(Secret Token)와 함께 글 번호를 보내면, 딱 그 글의 캐시만 폭파(revalidatePath)시켜!”라는 로직을 짰죠. - 워드프레스에 저격수(Webhook) 배치: 워드프레스 쪽에 플러그인(혹은 커스텀 PHP)을 달아서, 제가 ‘업데이트’ 버튼을 누르는 정확히 그 0.1초의 순간에 Next.js의 비밀 문으로 신호(Webhook)를 쏘게 만들었습니다.
4. 마치며: 통제된 속도가 주는 진짜 평온함 🧘♂️
이 ‘웹훅 브릿지’가 성공적으로 연결되던 날의 쾌감을 아직도 잊지 못합니다.
워드프레스에서 글을 수정하고 ‘업데이트’ 버튼을 누릅니다. Vercel이 그 신호를 받아 0.1초 만에 해당 페이지의 구버전 캐시만 조용히 날려버립니다. 프론트엔드 창으로 넘어가 새로고침을 누르면? 마법처럼 수정된 글이 즉각 렌더링되어 있습니다. 전체 사이트를 다시 빌드할 필요도 없이요!
진정한 ‘0.1초 컷’은 단순히 로딩이 빠른 것을 넘어, 데이터의 최신성까지 제 손끝에서 완벽하게 통제될 때 비로소 완성된다는 것을 뼈저리게 배운 삽질이었습니다.
올리브의 한 줄 요약: “캐시는 훌륭한 하인이지만, 통제하지 못하면 최악의 주인이 됩니다.” 🌿