[TIL]Next Cache

오늘 공부한것 & 기억할 내용

Next Cache 사용하는 이유

• db를 연결해 작업을 하다보면 비슷한 형식의 db연결을 반복적으로 사용할 일이 있는데 그때마다 db에 연결하여 불러오는것이 성능에 좋지 않기에 Next에서 제공하는 cache를 사용하여 불러온 db를 cache에 저장해놓고 그 캐시를 재사용한다.

unstable_cache

• Next에서 제공하는 unstable_cache함수를 사용하면 db에서 fetch한 데이터는 모두 cache되어 NextJs메모리에 들어간다.
• unstable_cache함수는 Next14에서 나왔고 아직 불안정 하기에 이름이 unstable_cache이다

import { unstable_cache } from 'next/cache';
 
const getCachedUser = unstable_cache(
  //데이터 베이스 실행하는 쿼리
  async (id) => getUser(id),
  //cache에 저장할 key값
  ['my-app-user']
);
 
export default async function Component({ userID }) {
  const user = await getCachedUser(userID);
  ...
}

revalidate

const getCacheProducts = unstable_cache(
    getProducts,['home-products'],{
        //user가 페이지를 다시 요청하는데 60초가 지난 상태라면 cache에 있는 데이터가 아닌 getProducts을 다시 실행시켜 캐시에 새롭게 저장한다
        //(60초마다 함수를 실행시키는게 아닌, 함수가 호출된 후 60초가 지났을때 다시 호출하면 함수를 재 실행시켜 새로운 데이터를 준다.)
        revalidate:60
    }
)

revalidatePath

• 요청에 의해 함수 호출되어 새로운 데이터가 새로고침되어 캐시에 저장된다.
• URL경로와 연관된 모든 데이터가 새로고침 된다.
• 문제점 - 해당 경로에 있는 모든 캐시 데이터가 새로고침 되기에 제어를 할 수 없다.

const revalidate = async () => {
	"use server"
  //home이랑 연관된 모든 데이터가 새로고침
  	revalidatePath('/home')
}

return(
	<form action={revalidate}>
  		<button>Revalidate</button>
  	</form>
)

revalidateTag

• 원하는 태그를 가진 데이터만 새로고침 할 수 있다. (같은 태그를 가진 캐시 또한 새로고침됨)

const getCachedProduct = unstable_cache(getProducts,["product-detail"],{
  	//tag는 여러개여도 상관없고 유니크한 이름이 아니어도 상관없다
	tags:["product-detail"]
})

const revalidate = async () => {
	"use server"
  //위에서 만든 태그의 이름을 넣어준다
  	revalidateTag('product-detail')
}

return(
	<form action={revalidate}>
  		<button>Revalidate</button>
  	</form>
)

fetch

• fetch는 자동적으로 데이터를 캐시에 저장해준다
• fetch를 사용할때 unstable_cache에서 사용하는 옵션들을 사용할 수 있다.

fetch('https://aaa',{
	next:{
    	validate:60,
      	tags:['product']
    }
})

Production Mode

• Route Segment Config의 옵션을 사용하여 빌드 타임에 페이지를 동적 또는 정적으로 처리하고, 성능을 최적화한다.
• npm run build를 하여 npm run start모드 일때만 사용할 수 있는 옵션들

dynamic

• NextJs에서 bulid를 할때 자동적으로 페이지들이 static인지 dynamic인지 분류를 해준다
  이때 static으로 분류된 페이지를 dynamic페이지로 바꾸고 싶다면 NextJs에서 제공하는 dynamic옵션을 사용할 수 있다.
• 기본적으로 정적으로 처리될 페이지를 동적으로 처리하도록 강제할 수 있다.

export const dynamic = 'force-dynamic'

revalidate

• NextJs에서 제공하는 옵션으로 페이지가 static이어도 60초(특정시간)가 지났을경우 데이터를 다시 패칭하여 페이지를 업데이트한다.

export const revalidate = 60

generateStaticPrams

• Next.js에서 동적 경로를 가진 페이지를 정적으로 생성(동적 경로를 정적 HTML 파일로 미리 빌드할 수 있다)
• 페이지가 id를 받아와서 보여지는 dynamic페이지일때 static으로 바꿔줄 수 있는 옵션
• 세션과 무관하게 모든 사용자에게 동일한 정보를 제공하는 페이지를 만들때 사용

export async function generateStaticPrams() {
    const product = await db.product.findMany({
        select:{
            id:true
        }
    })
    return product.map((i) => ({id:i.id+""}))
}

Static/Dynamic

Static 페이지

• 장점 : 로딩 속도 빠름, SEO에 유리, 서버 부하 적음, 보안성 높음
• 차이 : 미리 생성된 HTML 파일, 콘텐츠 변경 없음, 서버 요청 시 즉시 제공, 빌드 타임에 생성

Dynamic 페이지:

• 장점 : 실시간 데이터 반영, 사용자 맞춤형 콘텐츠 제공, 복잡한 상호작용 가능, 개인화된 경험 제공
• 차이 : 요청 시 실시간으로 생성, 데이터베이스나 API에서 콘텐츠 동적 로드, 사용자 상호작용에 따라 변경 가능, 요청 시간에 콘텐츠 생성

배운점 & 느낀점

cache를 사용해 페이지를 static으로 만들어 사이트 최적화를 시켜준다는것은 페이지 로딩 속도를 개선하고, 서버 부하를 줄이는 데 도움이 된다는것을 배웠다. 옵션들을 잘 사용하면 dynamic페이지도 static으로 바꿀 수 있어 로딩속도 개선에 좋을거 같은데 아직은 어떨때 써야하는지 감이 안온다.