Next.js 15의 새로운 데이터 페칭 전략 이해하기

Next.js 15에서는 데이터 페칭과 캐싱 전략이 크게 변경되었습니다. 기존의 불안정한(unstable) API들이 새로운 안정화된 API로 대체되었습니다.

1. 이전 방식 vs 새로운 방식

이전 방식 (Next.js 14 이하)

import { unstable_cache } from 'next/cache'
import { cache } from 'react'

export const getMessages = unstable_cache(
  cache(function () {
    return db.prepare("SELECT * FROM messages").all();
  }),
  ["messages"],
  {
    revalidate: 10,
    tags: ["messages"],
  }
);

새로운 방식 (Next.js 15)

'use cache'  // 파일 최상단에 추가
import { connection } from 'next/server'

export async function getMessages() {
  await connection()  // 동적 렌더링 opt-in

  return db.prepare("SELECT * FROM messages").all();
}

2. 다양한 사용 사례

실시간 데이터가 필요한 경우

'use cache'
import { connection } from 'next/server'

export async function getLiveMessages() {
  await connection()  // 항상 새로운 데이터
  return db.prepare("SELECT * FROM messages ORDER BY id DESC LIMIT 10").all();
}

캐싱이 필요한 경우

'use cache'

export async function getCachedMessages() {
  const messages = await fetch('/api/messages', {
    next: {
      revalidate: 60,  // 1분마다 갱신
      tags: ['messages']
    }
  });
  return messages.json();
}

하이브리드 접근

'use cache'
import { connection } from 'next/server'

export async function getMessages(options = { live: false }) {
  if (options.live) {
    await connection()
    return db.prepare("SELECT * FROM messages WHERE created_at > ?")
      .all(Date.now() - 5000);  // 최근 5초 데이터
  }

  return db.prepare("SELECT * FROM messages").all();
}

3. 주요 변경사항

1. 'use cache' 지시어

   • 파일 최상단에 추가
   • 캐싱 의도를 명확히 표현
   • Next.js 15의 권장 방식

2. connection() 함수

   • 동적 렌더링 명시
   • 캐시 없이 항상 새로운 데이터
   • unstable_noStore 대체

3. 캐싱 옵션 간소화

   • 복잡한 캐싱 설정 제거
   • 더 명확하고 예측 가능한 동작
   • 성능과 실시간성 사이의 균형

4. 마이그레이션 가이드

1. 기존 코드 식별

   // 변경이 필요한 코드 패턴
   import { unstable_cache, unstable_noStore } from 'next/cache'

2. 새로운 방식으로 변경

   // 새로운 코드 패턴
   'use cache'
   import { connection } from 'next/server'

3. 캐싱 전략 재검토

   • 실시간 데이터 필요 여부
   • 캐싱 필요성 검토
   • 성능 영향 고려

5. 결론

Next.js 15의 새로운 데이터 페칭 전략은:

• 더 명확하고 안정적인 API 제공
• 간소화된 캐싱 메커니즘
• 더 나은 개발자 경험
• 성능과 실시간성의 유연한 조절

이러한 변경사항을 통해 더 예측 가능하고 관리하기 쉬운 데이터 페칭이 가능해졌습니다.