문제 정의

관리자(Admin) 페이지를 통해 게시글Post을 관리하고 이를 일반 사용자에게 신속하게 제공하고 싶었습니다. 기존에는 모든 페이지를 SSR이나 CSR을 통해 동적으로 처리했으나, 이는 다음과 같은 문제점을 초래했습니다:

• 성능 저하: 모든 사용자 요청 시마다 서버에서 페이지를 렌더링해야 하므로, 응답 시간이 길어지고 서버 부하가 증가했습니다.
• 캐싱의 어려움: 서버 사이드에서 생성된 페이지를 효율적으로 캐싱하기 어려워, 반복되는 데이터 패칭으로 인한 불필요한 네트워크 요청이 발생했습니다.
• 사용자 경험 저하: 페이지 로딩 시간이 길어짐에 따라 사용자 경험이 저하되고, 특히 대규모 트래픽을 처리하는 경우 성능 문제가 두드러졌습니다.

이러한 문제를 해결하기 위해, ISR을 도입하여 정적 페이지의 성능과 동적 데이터 업데이트의 유연성을 동시에 확보하고자 했습니다. 특히, revalidatePath 기능을 활용하여 admin 에서 게시글을 수정할 때, 관련된 정적 페이지의 캐시를 최신화함으로써 사용자에게 항상 최신의 정적 콘텐츠를 제공하는 방안을 찾았습니다.

해결 과정

문제를 해결하기 위해 Next.js의 ISR과 revalidatePath 기능을 사용하였습니다. 이를 통해 관리자가 게시글을 관리하고 업데이트할 때, 관련 정적 페이지의 캐시를 자동으로 갱신하여 사용자에게 최신 콘텐츠를 빠르게 제공할 수 있게 되었습니다.

1. Next.js ISR 개념 이해 및 설정

   • ISR은 SSG된 페이지를 조건하에 재생성하여 최신 데이터를 반영하는 기능입니다.
   • 정적 페이지의 빠른 속도와 동적 데이터의 최신성을 동시에 확보할 수 있습니다.

2. 관리자 인터페이스에서 게시글 관리 구현

   • admin을 통해 게시글을 추가, 수정, 삭제할 수 있는 기능을 구현했습니다.
   • Supabase를 데이터베이스로 활용하여 게시글을 관리하였습니다.
   • 게시글 수정 시, Supabase의 upsert 기능을 사용하여 데이터를 업데이트하고, 관련 정적 페이지의 캐시를 갱신하기 위해 revalidatePath를 호출했습니다.

결과

revalidatePath 기능을 활용한 ISR 구현을 통해 다음과 같은 개선 효과를 얻었습니다:

• 성능 향상: 일반 사용자에게 제공되는 페이지는 정적으로 렌더링되어 로딩 속도가 빨라졌으며, 서버 부하가 감소했습니다.
• 데이터 최신성 유지: 관리자가 게시글을 수정할 때마다 관련 정적 페이지의 캐시가 자동으로 갱신되어, 사용자에게 항상 최신 게시글을 제공할 수 있었습니다.
• 사용자 경험 개선: 빠른 로딩 속도와 최신 데이터를 제공함으로써, 사용자 경험이 크게 향상되었습니다.
• 캐시 관리 최적화: Next.js의 ISR을 활용하여 효율적인 캐시 관리를 구현함으로써, 불필요한 네트워크 요청을 줄이고 서버 리소스를 절약할 수 있었습니다.

배운 점 (인사이트)

이번 경험을 통해 Next.js의 ISR과 revalidatePath 기능을 효과적으로 활용하여, 정적 페이지의 성능과 데이터의 최신화를 동시에 확보할 수 있었습니다. 이러한 접근 방식은 관리자입장에서 매우 편리하고, 사용자에게는 빠르고 일관된 경험을 제공합니다. Next.js 의 서버 관련 기능 중 어쩌면 가장 강력한 기능이 아닐까 생각됩니다.