Still Need Support | Caching Data From Api Calls Globally
Answered
Barbary Lion posted this in #help-forum
Barbary LionOP
I want to call the youtube api for the 3 most recent videos from 3 different channels. At the moment I’m able to do this but the problem is that the site calls the youtube api for the data every time the page is loaded and youtube has a low quota for that much data. Is there a way to globally cache data so that all users see the same cached videos every time they visit the site, then just call the youtube api every 2-3 hours for an updated list?
Answered by Arinji
Dev matches prod cache in the current versions, but on force reloading you essentially disable the cache, this can also be done by disabling cache in the network tab
25 Replies
Show your fetching function
Ideally nextjs will have cached the fetch
Unless you opted out somehow
@Arinji Ideally nextjs will have cached the fetch
Barbary LionOP
it does cache the fetch, but if say 10-20 people go on the website, wouldn't it still need to do an initial call for each new browser?
const fetchVideos = async () => {
const apiKey = process.env.YT_API_KEY;
const headeddChannel = process.env.YT_HEADEDD_ID;
const url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${headeddChannel}&part=snippet&order=date&maxResults=${3}`;
try {
const data = await fetch(url);
if (!data.ok) {
console.log(data.statusText)
}
return await data.json();
} catch (error) {
console.log(error);
}
}Barbary LionOP
Just from force reloading the page a few times I've reached 30% of the quota limit
Barbary LionOP
Would something like this possibly work using node-cache, or is there an easier/better way implemented in nextjs already?
import NodeCache from 'node-cache';
const cache = new NodeCache({ stdTTL: 10800 });
const fetchAndCache = async (url: string, cacheKey: string) => {
const cachedData = cache.get(cacheKey);
if (cachedData) {
return cachedData;
}
try {
const response = await fetch(url);
if (!response.ok) {
console.error(response.statusText);
return null;
}
const data = await response.json();
cache.set(cacheKey, data);
return data;
} catch (error) {
console.error(error);
return null;
}
};
export const fetchHeadeddVideos = async () => {
const apiKey = process.env.YT_API_KEY;
const headeddChannel = process.env.YT_HEADEDD_ID;
const url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${headeddChannel}&part=snippet&order=date&maxResults=3`;
return await fetchAndCache(url, 'headeddVideos');
};
export const fetchHeadedCSGOVideos = async () => {
const apiKey = process.env.YT_API_KEY;
const headedCSGOChannel = process.env.YT_HEADEDCSGO_ID;
const url = `https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${headedCSGOChannel}&part=snippet&order=date&maxResults=3`;
return await fetchAndCache(url, 'headedCSGOVideos');
};Barbary LionOP
wdym
npm run dev
@Arinji No, cache is global
Barbary LionOP
oh so node-cache isn’t even necessary?
@Arinji npm run dev
Barbary LionOP
yes
also have it on production now and the node-cache system is working as intended
@Barbary Lion yes
That's gonna disable cache on force reload
Barbary LionOP
gotchya
Dev matches prod cache in the current versions, but on force reloading you essentially disable the cache, this can also be done by disabling cache in the network tab
Answer
Everything cache related can be done in house with just nextjs
Barbary LionOP
Sounds good, think it’s even worth messing with if it’s already working though?
Enable full url logging, then you can see that it does have it cached (this works on dev as well)
@Barbary Lion Sounds good, think it’s even worth messing with if it’s already working though?
Upto you, I would have refactored to use nextjs only but upto you
Barbary LionOP
Appreciate it
@Barbary Lion Appreciate it
Mark a solution