Unstable_cache

app > (tabs) > home > page.tsx

import {unstable_cache as nextCache } from "next/cache";

const getCachedProducts = nextCache(getInitialProducts, ["home-products"]);

async function getInitialProducts() { 
~ 
}

cache를 넣어주면 데이터베이스를 보지 않고,

home-products라는 데이터를 찾아서 함수를 다시 실행하지 않음

파일을 새로 저장하거나 서버를 재시작하면 캐시를 리프레시할 수 있음

revalidate Path 요청형 새로고침

app > (tabs) > home > page.tsx

버튼을 클릭하면 데이터베이스를 새로 가져온다.

 //...
  const revalidate = async() => {
    "use server";
    revalidatePath("/home"); // 요청형 새로고침
  }
  
  return (
    <div>
      <ProductList initialProducts={initialProducts} />
      <form action={revalidate}>
        <button>Revalidate</button>
      </form>
    //...
    </div>
  );

“/home” 경로와 연관돼 있는 모든 데이터가 새로고침 될 것.