how do i retrieve items from the cache?
#caching
latent knoll
tame cryptBOT
Hi @latent knoll. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js, you can retrieve items from the cache using the fetch function or the React cache function.
The fetch function is automatically memoized, meaning that if you call the same function multiple times, it will only execute once and the result will be cached. This is useful when you need to use the same data across a route (e.g. in a Layout, Page, and multiple components). Here's an example:
async function getItem() {
// The `fetch` function is automatically memoized and the result
// is cached
const res = await fetch('<https://.../item/1'>)
return res.json()
}
// This function is called twice, but only executed the first time
const item = await getItem() // cache MISS
// The second call could be anywhere in your route
const item = await getItem() // cache HIT
(Source: Next.js Documentation (https://nextjs.org/docs/app/building-your-application/caching))
The React cache function allows you to memoize the return value of a function, allowing you to call the same function multiple times while only executing it once. Here's an example:
import { cache } from 'react'
import db from '@/lib/db'
export const getItem = cache(async (id: string) => {
const item = await db.item.findUnique({ id })
return item
})
(Source: Next.js Documentation (https://nextjs.org/docs/app/building-your-application/caching))
Please note that the unstable_cache function is an experimental API for adding values to the Data Cache when the fetch API is not suitable. However, it's still being developed and not recommended for use in production.
import { unstable_cache } from 'next/cache'
export default async function Page() {
const cachedData = await unstable_cache(
async () => {
const data = await db.query('...')
return data
},
['cache-key'],
{
tags: ['a', 'b', 'c'],
revalidate: 10,
}
)()
}
(Source: Next.js Documentation (https://nextjs.org/docs/app/building-your-application/caching))
Remember to replace the example URLs and database queries with your actual data sources.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
latent knoll
@tame crypt what is the cache-key used for?
tame cryptBOT
Let me check the knowledge base for you. One moment! :books:
The cache-key is used to identify the specific data that is being cached. When you use the unstable_cache function in Next.js, you pass in an array with the cache-key as an argument. This key is used to store and retrieve the cached data.
Here's an example:
import { unstable_cache } from 'next/cache'
export default async function Page() {
const cachedData = await unstable_cache(
async () => {
const data = await db.query('...')
return data
},
['cache-key'], // This is the cache-key
{
tags: ['a', 'b', 'c'],
revalidate: 10,
}
)()
}
(Source: Next.js Documentation (https://nextjs.org/docs/app/building-your-application/caching))
In this example, the cache-key is used to store the result of the database query. If the same cache-key is used in a subsequent call to unstable_cache, the function will return the cached data instead of executing the database query again.
Please note that the unstable_cache function is experimental and not recommended for use in production.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
latent knoll
@tame crypt can i put unstable_cache in a separate file?
tame cryptBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you can put the unstable_cache function in a separate file and then import it where needed. Here's an example of how you might do this:
// cache.js
import { unstable_cache } from 'next/cache'
export async function getCachedData() {
const cachedData = await unstable_cache(
async () => {
const data = await db.query('...')
return data
},
['cache-key'],
{
tags: ['a', 'b', 'c'],
revalidate: 10,
}
)()
return cachedData
}
Then, in another file, you can import and use the getCachedData function:
// page.js
import { getCachedData } from './cache'
export default async function Page() {
const data = await getCachedData()
// ...
}
Please replace the db.query('...') with your actual database query and adjust the cache-key and tags as needed.
Remember that the unstable_cache function is experimental and not recommended for use in production.