[Next.js] 캐싱 관련 코드

import Messages from "@/components/messages";
import { unstable_noStore } from "next/cache";

// export const revalidate = 5; // 모든 페이지에서 요청시 캐싱 진행 5초간 백엔드 요청 안함
// export const dynamic = "force-dynamic"; // 모든 페이지에서 캐싱안함

export default async function MessagesPage() {
  // unstable_noStore() // 해당 페이지에서 캐싱안함.
  const response = await fetch("http://localhost:8080/messages", {
    // cache: 'force-cache', // 캐싱강제.
    // cache: 'no-store' // 캐싱안함
    // next: { revalidate: 5 } // 최초 통신 후 5초간 요청시 통신 안함.
  });
  const messages = await response.json();

  if (!messages || messages.length === 0) {
    return <p>No messages found</p>;
  }

  return <Messages messages={messages} />;
}

 

 

간단한 통신할때, tanstackquery 같은 기능을 내장하게 두어 Nextjs 자체가 캐싱하는 방식이다.

 

캐싱의 종류는 4가지로

서버	클라이언트
메모요청, 데이터캐시, 전체 경로 캐시	라우터캐시

 

위에서 적어둔 코드는 데이터 캐시이다.

위 방식은 통신 자체를 컨트롤 하는 방법이고

보통은 페이지 통신 후

 

클라이언트측에서

revalidatePath 의 방식과 revalidateTag 의 방식으로 사용한다.

Path의 경우 경로를 설정하고 사용한다.

revalidatePath('/')

// 첫번째는 페이지이고, 두번째는 해당 컴포넌트 이름이다.
revalidatePath('/', 'layout')

Tag의 경우 통신 모듈 자체에 특정 키를 적어두고 사용한다.

// Cache data with a tag
fetch(`https://...`, { next: { tags: ['a', 'b', 'c'] } })

// Revalidate entries with a specific tag
revalidateTag('a')

 

 

 

전체경로 캐시의 경우 next run build할때 발생하는
전체 페이지를 미리 렌더링 후 업데이트 하지 않는 문제로 새로운 데이터가 발생해도 다시 재렌더링(업데이트)하지 않는 문제를
전체 경로캐시 라고 함.

 

---

https://nextjs.org/docs/app/building-your-application/caching

참조 문서

Building Your Application: Caching | Next.js