Next.js Discord

Discord Forum

Best way to cache database results in website

Unanswered
Gray Flycatcher posted this in #help-forum
Open in Discord
Gray FlycatcherOP
Hi, basically I have a website using stripe and mongodb for inventory management, and to reduce api requests to either places, I was thinking it would be best to like cache the values needed for each (price from stripe and the stocks and id from mongodb), and in my admin panel, if i update the price or stock level, it refreshes that cache, (or refreshes on server restart), then i can just use this cache for the prices being displayed on my website, and out of stock stuff being calculated. Is this possible and is this proper practice?

17 Replies

jakmaz
You could cache api calls and set the time in which you want to revalidate them again (that is to load a new version). You could also use on-demand revalidating where you can manually refresh it whenever you want by ravalidating its tag.
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching
jakmaz
Yes, I believe that it is possible. You could create an admin dashboard in your app and fire the revalidation from it
@jakmaz Yes, I believe that it is possible. You could create an admin dashboard in your app and fire the revalidation from it
Gray FlycatcherOP
this is how i get the stuff, so would i have to cache the entire GET request, or can i cache the individual Products.find and stripe.retrieve?

export async function GET(request) {
    await connectToDb()
    const products = await Products.find({}, {stripeProductId:1, stripePriceId:1, slug:1,stock:1,_id:1}).lean()

    return NextResponse.json(
    await Promise.all(products.map(async product => {
        const price = await stripe.prices.retrieve(product.stripePriceId);
        return {
            ...product,
            price: price ? price.unit_amount : null,
        };
    }))
    );
}
jakmaz
You can cache whole api request. It is also possible to cache ORMs (for example mongoose) calls but you would have to dig more into it 😉

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server-with-an-orm-or-database
Splitting the request into two seems an easier approach, I have no idea how could we use caching on stripe library
Gray FlycatcherOP
seems like i would just have to make a get request for the stripe bit, then cache that whole api request, then use that
jakmaz
Exactly!
@jakmaz Exactly!
Gray FlycatcherOP
ive implmeneted all the caching, i was just wondering if there is a way for a component for my website to retrieve data from /api/getProducts but all server side, so if i acc went to that link then i wouldnt get anything as theres some secret header key only that componenet uses, then from there that fetched data can be used within the component and rendered?
if u are on v14 u can use unstable_cache
with this u can basically cache any functions return value
so if u have a function that returns prices from stripe, u can cache the return values
@gin https://nextjs.org/docs/app/api-reference/functions/unstable_cache
jakmaz
the caching situation drives me crazy, it says that unstable cache is legacy and we should use „use cache” that is still in the experimental version and has basically no documentation
I better take a break until they get things working
@gin https://nextjs.org/docs/app/api-reference/functions/unstable_cache
Gray FlycatcherOP
i just implemented it by putting the stripe.retrieve and mongo queries in individual get requests and caching them