Are you reading my mind? Always when I have a project where I need a specific answer video too, I see you uploaded a video to it a few hours or days ago, which nails the topic directly and helps a lot! Thank you mate.
@Alexander Lichter I'm not sure if you're familiar with Vercel, but with Nuxt 3 + Vercel do we even need to cache our API routes? Because I just found out Vercel seems to cache API routes already. Just wanted to figure out if there are still benefits using the Nitro cache instead of Vercels cache mechanism?
The dumbest thing happened to me... I spent like 1 hour debugging why my route wasn't cached. I noticed I checked the "Disable cache" box in my Google Chrome Dev tools. Guys, please make sure this doesn't happen to you 😂
Is it possible to use a catch-all route (server/api/[...].ts) and a specific route rule in the config at the same time? I want to cache one particular route (/api/settings) 🤔
Amazing video! Nitro keeps blowing my mind on how simple it's to get it running and doing complex stuff. But a question not totally related to the video, but if you build a project like this for nitro (stand alone) and you want to use with an spa (without nuxt or even without vue), how can I get the types from the nitro project? Do I need to setup a monorepo?
How can we invalidate cache? In my use case the admin can manage text snippets. These text snippets are served via API which is cached. Now, when the admin edits the text snippets I want to invalidate the cache. How can we do that?
@@TheAlexLichter Oh sorry 🙈 Just watched it and it's working. Is it also possible to see if there are **any** files in a cache folder? For example, my folder cache/nitro/routes/text-snippet contains two files (one for each language) apitextsnippetnl.NeLIZHtsRw.json and apitextsnippeten.somethingelse.json. Can I do something like useStorage('routes:text-snippet').hasCache() and useStorage('routes:text-snippet').removeAll() to remove all files within that folder?
@@TheAlexLichter Oh sorry I missed that. I've implemented it that way and it's working (= removing the cache file). However, when I reload the page as the user it still says "200 OK (from disk cache)" in the Network tab and it gives me the old data. Why is that? When I add a hash to my fetch request I'm getting the new data: /api/text-snippet/${locale}?hash="12" I'm doing this: const cacheStorage = useStorage('cache'); await cacheStorage.clear(); And this is my route rule config: '/api/text-snippet/**': { cache: { swr: true, maxAge: 86400, staleMaxAge: 172800, name: 'text-snippet', } }
How to do cache with handler with auth ? if i use const session = await requireUserSession(event) from (Nuxt Auth Utils) inside, it doesn't work ( i use Nuxthub)
Great video. Do you have any advice on how to set up Nitro endpoint in Nuxt to only request on buildtime (in Nuxt SSR) and then always use the cached response until next deploy (I am using Netlify)? My use case is I have a Nitro endpoint to generate image thumbnails via thumbhash and those obviously never change for a given image. So ideally I would only generate them once on deploy and in production it would use the cached version (indefinitely) until next deploy. I thought of an arbitrary maxAge settings, but doing something like "maxAge: Infinity" seems weird to me. Thank you!
@@TheAlexLichter Thanks for the reply. Prerender as in nitro.prerender or routeRules: { "...": {prerender: true}}? It gets confusing real quick as some of the settings are aliases for Nitro config and some are not. Also, can you set up some sort of a crawler to prerender all found endpoints rather than specifying all paths to images manually?
As route rule (2nd option) 👌 Hmm, not sure about the 2nd part. The Nuxt crawler will crawl a lot of the pages when found but maybe it'd be great to have a way to specify/customize this behavior to also add images and similar. How about raising an issue in nuxt/nuxt about that? 😊
@TheAlexLichter Is there a way to get all caches in a Nitro/Nuxt app? My use case is that I would like to build an admin interface, where you can invalidate caches :)
Greate Alexander! Thank you for the good tutorials. I have a question because i use cache in Nitro alot. How can i access a url parameter or slug inside a Info.server.vue component example. Because if i use useRoute() it is empty. I ask that because when i want to access something function from server i use Nitro and with this i can make a call directly from my server component.
Are you reading my mind? Always when I have a project where I need a specific answer video too, I see you uploaded a video to it a few hours or days ago, which nails the topic directly and helps a lot! Thank you mate.
What a timing! Really glad that my content was there right when you needed it 😁
Very nice introduction to caching options. Thank you!
Thanks 🙏🏻
Thank you for your videos. They have been a tremendous help on a project I’m working on.
Happy they could help you 🙏🏻
Thanks for the video Alex!
You are welcome 👏🏻
This is super useful! Thanks
Glad you think so!
I had no idea this was all doable within Nitro, going to set this up asap
This is awesome
Right? 🙌
@Alexander Lichter I'm not sure if you're familiar with Vercel, but with Nuxt 3 + Vercel do we even need to cache our API routes? Because I just found out Vercel seems to cache API routes already. Just wanted to figure out if there are still benefits using the Nitro cache instead of Vercels cache mechanism?
Wow this is amazing. I have used hono but unjs seems good too..
It really is! Give it a try 🔥
Всё очень понятно и классно рассказал. Спасибо друг
The dumbest thing happened to me... I spent like 1 hour debugging why my route wasn't cached. I noticed I checked the "Disable cache" box in my Google Chrome Dev tools. Guys, please make sure this doesn't happen to you 😂
Next goal rate limiter?
Is it possible to use a catch-all route (server/api/[...].ts) and a specific route rule in the config at the same time? I want to cache one particular route (/api/settings) 🤔
Then you'd need a dedicated /api/settings.ts file (which can do the same as the catch-all) - yes.
Amazing video! Nitro keeps blowing my mind on how simple it's to get it running and doing complex stuff.
But a question not totally related to the video, but if you build a project like this for nitro (stand alone) and you want to use with an spa (without nuxt or even without vue), how can I get the types from the nitro project? Do I need to setup a monorepo?
Thank you 🙏🏻
Yeah, that's a bit more tricky. I hope I can make a video on that soon
How can we invalidate cache? In my use case the admin can manage text snippets. These text snippets are served via API which is cached. Now, when the admin edits the text snippets I want to invalidate the cache. How can we do that?
See from 16:27 👌🏻
@@TheAlexLichter Oh sorry 🙈 Just watched it and it's working. Is it also possible to see if there are **any** files in a cache folder? For example, my folder cache/nitro/routes/text-snippet contains two files (one for each language) apitextsnippetnl.NeLIZHtsRw.json and apitextsnippeten.somethingelse.json. Can I do something like useStorage('routes:text-snippet').hasCache() and useStorage('routes:text-snippet').removeAll() to remove all files within that folder?
@@TheAlexLichter Oh sorry I missed that. I've implemented it that way and it's working (= removing the cache file). However, when I reload the page as the user it still says "200 OK (from disk cache)" in the Network tab and it gives me the old data. Why is that? When I add a hash to my fetch request I'm getting the new data: /api/text-snippet/${locale}?hash="12" I'm doing this: const cacheStorage = useStorage('cache'); await cacheStorage.clear(); And this is my route rule config:
'/api/text-snippet/**': {
cache: {
swr: true,
maxAge: 86400,
staleMaxAge: 172800,
name: 'text-snippet',
}
}
I suppose if you're gonna keep bringing up stuff super relevant to me I'm just going to have to subscribe
I wouldn't mind that 😛
Thanks for the sub!
How to do cache with handler with auth ? if i use const session = await requireUserSession(event) from (Nuxt Auth Utils) inside, it doesn't work ( i use Nuxthub)
The cache is by-passed if we detect an authenticated request to avoid cross request state pollution.
@@atinux Thank you, so i can't cache ? ( with other way) , i shoud never cache auth request ?
No you should not cache Auth request. But you can cache functions inside using defineCachedFunction
@@atinux Thank you
Nothing to add here 🔥
thanks
No problem!
Great video. Do you have any advice on how to set up Nitro endpoint in Nuxt to only request on buildtime (in Nuxt SSR) and then always use the cached response until next deploy (I am using Netlify)?
My use case is I have a Nitro endpoint to generate image thumbnails via thumbhash and those obviously never change for a given image. So ideally I would only generate them once on deploy and in production it would use the cached version (indefinitely) until next deploy. I thought of an arbitrary maxAge settings, but doing something like "maxAge: Infinity" seems weird to me. Thank you!
Sure! You can also use the prerender route rule for the path 👌
@@TheAlexLichter Thanks for the reply. Prerender as in nitro.prerender or routeRules: { "...": {prerender: true}}? It gets confusing real quick as some of the settings are aliases for Nitro config and some are not. Also, can you set up some sort of a crawler to prerender all found endpoints rather than specifying all paths to images manually?
As route rule (2nd option) 👌
Hmm, not sure about the 2nd part. The Nuxt crawler will crawl a lot of the pages when found but maybe it'd be great to have a way to specify/customize this behavior to also add images and similar. How about raising an issue in nuxt/nuxt about that? 😊
❤❤❤🎉🎉🎉
@TheAlexLichter Is there a way to get all caches in a Nitro/Nuxt app? My use case is that I would like to build an admin interface, where you can invalidate caches :)
You certainly can. NuxtHub is also doing that 👌🏻
Greate Alexander! Thank you for the good tutorials.
I have a question because i use cache in Nitro alot.
How can i access a url parameter or slug inside a Info.server.vue component example. Because if i use useRoute() it is empty.
I ask that because when i want to access something function from server i use Nitro and with this i can make a call directly from my server component.
(Answered in the more recent comment, sorry that I missed this one!)
Used Nitro caching the first time two years ago, was about time someone exposes that to the world :)
Больная тема. Когда внезапно узнали что swr не работает в Netlify
That sounds like a bug! Is there an open nitro issue?
На vercel вроде порядок
@@paranoidPhantom ну так это одно, а это другое
@@paranoidPhantom на vercel не работает ISR.. Если добавить параметры в Get запрос - они игнорируются :(
Хорош 👍