I just started following nextjs's official tutorial and run into a problem with cache. I understand that nextjs's default behavior is to cache all the data, RSC payload and HTML. I have been referring to this page. However, it does not mention which directory on the server the cache lives. This is my build folder
This is one of my route's page
import { Suspense } from "react";
async function ProductQuantity(){
let res = await fetch("https://api.vercel.app/products/1");
let data = await res.json();
return <h1>{data.stock}</h1>
}
export default function Page(){
return(
<section>
<h1>Product</h1>
<Suspense fallback={null}>
<ProductQuantity />
</Suspense>
</section>
)
}
This is apparently an RSC. My understanding is during build time, cache should be generated under /build and I cannot find where it is.
The closest thing I can find under /build is a json file under /fetch-cache
{"kind":"FETCH","data":{"headers":{"cache-control":"public, max-age=0, must-revalidate","connection":"keep-alive","content-encoding":"br","content-type":"application/json","date":"Sat, 24 Feb 2024 21:49:48 GMT","server":"Vercel","strict-transport-security":"max-age=63072000; includeSubDomains; preload","transfer-encoding":"chunked","x-vercel-cache":"MISS","x-vercel-id":"pdx1::4cvln-1708811388089-e9b764356ae6"},"body":"eyJpZCI6MSwibmFtZSI6IlNtYXJ0cGhvbmUgWDIzIiwicHJpY2UiOjY5OS45OSwiZGVzY3JpcHRpb24iOiJUaGUgbGF0ZXN0IGZsYWdzaGlwIHNtYXJ0cGhvbmUgd2l0aCBhIHN0dW5uaW5nIGRpc3BsYXkgYW5kIGFkdmFuY2VkIGNhbWVyYSBmZWF0dXJlcy4iLCJjYXRlZ29yeSI6IkVsZWN0cm9uaWNzIiwiYnJhbmQiOiJCcmFuZCBBIiwic3RvY2siOjUwfQ==","status":200,"url":"https://api.vercel.app/products/1"},"revalidate":31536000,"tags":[]}
However, it does not contain the number 50 which is the returned value of the fetch request.
Also, does nextjs's dev server also implement cache?
Thanks.
I watched this video from vercel and still it does not explain where the cache is.