Next.js 13+ 캐싱 메커니즘 분석 및 큐시즘 홈페이지 개선 사례

Next.js 13+ 캐싱 메커니즘 분석 및 큐시즘 홈페이지 개선

이 글은 Next.js 13 버전 이후 도입된 새로운 캐싱 메커니즘인 Request Memoization, Data Cache, Full Route Cache를 깊이 있게 분석하고, 실제 큐시즘 학회 홈페이지 개선 프로젝트에 적용한 사례를 공유합니다.

핵심 기술 및 개발 논점

Next.js의 App Router와 함께 소개된 Request Memoization, Data Cache, Full Route Cache 메커니즘을 통해 웹 서버의 성능을 향상시키고 사용자 경험을 개선하는 방안을 제시합니다.

기술적 세부사항

• Next.js 캐싱 메커니즘:

  • Request Memoization: fetch 함수의 반환값을 서버에서 재사용하여 동일한 API 요청을 한 번만 실행합니다. React Component tree 내에서 데이터 재사용을 목적으로 하며, request 생명주기 동안 유효합니다.
  • Data Cache: fetch 함수에 next.revalidate 옵션을 통해 일정 시간 동안 API 응답값을 캐싱합니다. 일정 시간 동안 웹 서버로 들어오는 모든 요청에 대해 캐싱된 응답값을 반환하여 API 요청 횟수를 줄입니다.
  • Full Route Cache: 서버 렌더링 결과를 재사용하여 렌더링 비용을 감소시키고 성능을 향상시킵니다. 정적 렌더링 시에만 적용되며, Dynamic Function 사용 시 Skip됩니다.
  • Router Cache: 클라이언트 네비게이션 시 서버 요청을 줄이기 위해 RSC Payload를 클라이언트에 캐싱합니다. 세션 또는 정해진 시간 동안 유효합니다.

• 기존 큐시즘 홈페이지 문제점:

  • CSR 방식 구현으로 인한 느린 초기 로딩 속도 (Lighthouse LCP 7초).
  • 부족한 SEO로 인한 검색 엔진 노출 제한.
  • 프로젝트 전시 페이지 분리 관리로 인한 접근성 및 일관성 저하.
  • 반응형 미지원으로 인한 UI 깨짐 현상.

• 큐시즘 홈페이지 개선 적용 내용:

  • 프로젝트 페이지 및 후기 페이지 개선: 피그마 디자인 기반으로 HTML 및 컴포넌트 구조를 처음부터 새로 설계하여 마이그레이션.
  • ISR(Incremental Static Regeneration) 적용: 데이터 변경이 잦지 않은 학회 웹사이트 특성을 고려하여, 서버 부하 증가를 방지하고 최신 정보를 적절히 반영하기 위해 ISR 방식 채택 (SSG 대비 유연성 확보).
  • 이미지 태그 priority 옵션 적용: 초기 렌더링 시 이미지 로딩 우선순위 지정.
  • Link 태그 프리페칭 적용: 페이지 전환 속도 향상.
  • 검색 엔진 노출 최적화: Meta Data 설정, robots & sitemap 설정.

개발 임팩트

• ISR 도입을 통한 초기 렌더링 및 이미지 표시 속도 개선.
• 이미지 priority 옵션 및 Link 프리페치 최적화를 통한 사용자 경험 향상.
• 서버 컴포넌트 기반 번들 크기 감소 및 SEO 최적화를 통한 검색 엔진 노출 증대.
• 트러블 슈팅 경험 공유 (이미지 402 오류).

커뮤니티 반응

(제공된 원문 내 커뮤니티 반응 언급 없음)