피드로 돌아가기
Dev.toFrontend
원문 읽기
WP REST API와 Next.js ISR 기반의 제로-리다이렉트 Headless 전환
From Native WordPress to Headless: The Real Engineering Decisions Behind a Production Migration
AI 요약
Context
기존 WooCommerce 사이트의 SEO 자산과 데이터 구조를 유지하며 프론트엔드 성능을 개선해야 하는 상황. WordPress 관리 도구에 익숙한 운영팀의 워크플로우 저해를 최소화하는 것이 핵심 제약 사항임.
Technical Solution
- WPGraphQL 대신 내장 WP REST API를 채택하여 플러그인 의존성을 제거한 Lean Shell 구조 설계
- Next.js Server Components 내 fetch를 통한 서버 사이드 데이터 소비 및 기존 URL Slug 구조 1:1 매핑
- ISR(Incremental Static Regeneration) 적용 및 WP Custom Action 기반의 Revalidation Hook 구현으로 캐시 무효화 자동화
- GA4 Data API와 WooCommerce API를 통합한 Next.js 전용 Admin Dashboard 구축으로 운영자 행동 패턴 유지
- Railway와 FastPanel의 분리 배포 전략을 통한 인프라 추상화 및 운영 복잡도 제거
실천 포인트
- Headless 전환 시 신규 기술 도입보다 기존 운영자의 Behavioral Parity 유지 우선 검토 - SEO 보존을 위해 기존 CMS의 Slug 체계와 프론트엔드 Dynamic Route 간 1:1 매핑 검증 - 무분별한 GraphQL 도입 대신 데이터 레이어의 슬림화를 위해 내장 REST API 활용 고려 - CMS 업데이트 시 API Route를 통한 온디맨드 ISR 재검증(Revalidation) 파이프라인 구축