🚀 Next.js 16 캐싱 적용해보기

📌 개요

Next.js 16의 새로운 캐싱 기능을 프로젝트에 적용하여 성능을 개선함. 기존의 fetch 기반 데이터 로딩 방식에서 서버 액션과 'use cache' 디렉티브를 활용한 최적화된 구조로 전환했음.

---

🎯 주요 변경 사항

1. 캐시된 서버 액션 추가

기존에는 클라이언트에서 직접 API를 호출하는 방식을 사용했으나, 이를 서버 액션으로 전환하고 캐싱을 적용함.

변경 전 (app/page.tsx):

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

const Page = async () => {
  if (!BASE_URL) return null;
  const res = await fetch(`${BASE_URL}/api/events`);
  const { events } = await res.json();
  // ...
}

변경 후 (app/page.tsx):

import { getAllEventsCached } from "@/lib/actions/event.actions";

const Page = async () => {
  const events = await getAllEventsCached();
  // ...
}

💡 주요 개선점

• 환경 변수 의존성 제거
• 불필요한 네트워크 오버헤드 감소
• 서버 사이드에서 직접 데이터베이스 접근으로 응답 속도 향상

---

2. getAllEventsCached 구현

lib/actions/event.actions.ts에 새로운 캐시된 서버 액션을 추가함:

export const getAllEventsCached = async () => {
    'use cache';

    try {
        await connectDB();

        const events = await Event.find().sort({ createdAt: -1 }).lean();

        return JSON.parse(JSON.stringify(events));
    } catch (error) {
        console.error("Error fetching all events:", error);
        throw error;
    }
};

🔥 핵심 포인트

• 'use cache' 디렉티브: Next.js 16의 새로운 기능으로, 함수 실행 결과를 자동으로 캐싱 (next.config.ts 에서 cacheComponents 를 true 로 해야함.)
• .lean(): Mongoose의 lean() 메서드로 순수 JavaScript 객체 반환, 메모리 사용량 감소
• JSON.parse(JSON.stringify()): MongoDB ObjectId와 Date 객체를 직렬화하여 클라이언트 컴포넌트에서도 안전하게 사용 가능하도록 처리

---

3. EventList 컴포넌트 분리

코드 구조 개선을 위해 이벤트 목록 렌더링 로직을 별도 컴포넌트로 추출함.

components/EventList.tsx:

import EventCard from "@/components/EventCard";
import { IEvent } from "@/database";

export default async function EventList({ events }: { events: IEvent[] }) {

  return (
    <ul className="events">
      {events && events.length > 0 ? (
        events.map((event: IEvent) => (
          <li key={event.title} className="list-none">
            <EventCard {...event} />
          </li>
        ))
      ) : (
        <p className="text-center text-gray-500">No events found at the moment.</p>
      )}
    </ul>
  );
}

이를 통해 다음과 같은 이점을 얻음:

• 관심사의 분리
• 재사용 가능한 컴포넌트 구조
• 더 나은 코드 가독성
• 빈 상태 처리 개선

---

4. Next.js 설정 업데이트

next.config.ts에 캐싱 관련 설정을 추가함:

const nextConfig: NextConfig = {
  cacheComponents: true,
  
  images: {
    remotePatterns: [
      // ...
    ]
  }
};

⚙️ cacheComponents 옵션

Next.js 16에서 기능으로, 컴포넌트 레벨의 캐싱을 활성화함. 이를 통해 서버 컴포넌트의 렌더링 결과도 캐시할 수 있음.

---

📊 성능 개선 효과

Before

1. 클라이언트 → API Route → MongoDB
2. 매 요청마다 전체 네트워크 라운드트립 발생
3. 환경 변수 검증 오버헤드

After

1. 서버 컴포넌트 → 캐시된 서버 액션 → MongoDB
2. 캐시 히트 시 데이터베이스 쿼리 생략
3. 직접적인 데이터베이스 접근으로 응답 시간 단축

---

🔍 기술적 인사이트

Next.js 16의 'use cache' 디렉티브

'use cache'는 Next.js 16에서 새롭게 도입된 기능으로, 다음과 같은 특징이 있음:

• 함수 레벨 캐싱: 특정 함수의 실행 결과를 캐시
• 자동 무효화: 배포 시 또는 revalidate 설정에 따라 자동으로 캐시 무효화
• 타입 안전성: TypeScript와 완벽하게 호환
• 서버 액션과의 통합: 서버 액션에서 바로 사용 가능

Mongoose .lean() 최적화

const events = await Event.find().sort({ createdAt: -1 }).lean();

.lean() 메서드는:

• Mongoose Document 대신 순수 JavaScript 객체 반환
• 메모리 사용량 약 30-40% 감소
• 직렬화 성능 향상
• 읽기 전용 데이터에 최적화

⚠️ 주의사항

.lean()을 사용하면 Mongoose의 virtuals, getter/setter, 메서드 등을 사용할 수 없음. 순수하게 데이터만 읽어올 때 사용해야 함.

---

🎨 코드 구조 개선

컴포넌트 분리의 이점

기존에는 app/page.tsx에서 직접 이벤트 목록을 렌더링했으나, EventList 컴포넌트로 분리함으로써:

1. 단일 책임 원칙 준수: 각 컴포넌트가 하나의 명확한 역할 수행
2. 테스트 용이성: 독립적인 컴포넌트 테스트 가능
3. 재사용성: 다른 페이지에서도 동일한 이벤트 리스트 UI 재사용 가능
4. 유지보수성: 이벤트 목록 관련 변경사항을 한 곳에서 관리

---

🚦 다음 단계

현재 구현된 캐싱은 기본적인 수준이며, 추가로 고려할 수 있는 개선사항:

1. Revalidation 전략 수립

   • 이벤트 생성/수정 시 캐시 무효화
   • 시간 기반 revalidation 설정

2. 세분화된 캐싱

   • 개별 이벤트 단위 캐싱
   • 태그 기반 캐시 무효화

3. 모니터링

   • 캐시 히트율 측정
   • 성능 메트릭 추적

---

📝 결론

Next.js 16의 새로운 캐싱 기능을 활용하여 애플리케이션의 성능을 크게 개선함. 'use cache' 디렉티브와 서버 액션의 조합은 매우 강력하며, 기존의 복잡한 캐싱 전략을 단순화할 수 있음.

특히 다음과 같은 점에서 의미가 있음:

• ✅ 개발자 경험(DX) 향상: 선언적인 캐싱 방식
• ✅ 성능 개선: 불필요한 네트워크 요청 제거
• ✅ 코드 품질: 더 나은 구조와 관심사의 분리
• ✅ 확장성: 향후 추가 최적화를 위한 기반 마련

---