Yo Alex great video ❤ Quick question: It would be great if layouts can behave differently than from the page components or have an option for that in definePageMeta 🤔 don't you think ❓ One use case would be to disable JS for a static rouute while the header is still interactive 😊
Totally agree, i sometime try to use them, but i always find myself stuck in s super wierd bug i can't really easily solve, so i just do things the traditional way. Would be super cool to present Nuxt 4, like a server component update.
Thanks for this one, Alex! I like this direct approach of methodically exposing the matter with some nice examples. This episode helps one to better understand Nuxt's capabilities and these examples demonstrate the extraordinary ease of use. People want to be able to find info on how to solve real-world problems/use cases, and such a content is right on spot. Your patient teaching tone as if you are explaining something to a five-year old makes complex topics feel naturally simple. Every Friday is a kind of a holiday for me, and I'm always looking forward to the next episode. Kindest regards!
I don't usually comment on videos but this one was hugely helpful in trying to get my site more performant. That inline script trick for handling, in my case, the prefers-color-scheme setting for the user so that I don't have a flash of light/dark theme as the page loads was mint 👌
Great content as always. Would be great if Nuxt allowed to add getKey, shouldInvalidateCache and shouldBypassCache in the config for page routes. We had to set last-modified header property to undefined in a ntiro plugin to prevent Nuxt from creating a cache version under certain circumstances (Storyblok Live Preview mode). Otherwise we would always see a cached version while editing.
Lots of people have that request but the content of the nuxt.config.ts has to stay serializable, so unfortunately that's not possible :/ But the Nitro cache handler has options for it!
It all can be pretty confusing to understand, until you have a specific need for one of these modes in your app, then everything makes sense. It is much harder to understand options for problems you didn't have to solve in your own journey yet.
Thanks for creating this video! As a beginner studying Nuxt.js, your videos have always been very helpful to me. I'm curious whether I've understood this video correctly, and I have a question regarding it. Here are my conclusions about the rendering modes with corresponding configuration codes. Could you point out any mistakes? CSR: ssr: false SSR: ssr: true SSG: static: true || isr: true ISR: isr: 3600 In this codes, I am confused about the SSG setting. Is my code correct?
Hey, Alex! Nice video! One quick question: how would it work for specific dynamic routes? Lets say we have `/products/${product-slug}` that can use SWR and a harder cache rule and for this case we can have `/products/**: { swr: true }` as a rule. But in case we have a specific route for partners that we need to validate in time and no cache is allowed, something like `/products/${product-slug}/partner-sale`. This one would be better to have `swr: false`, but it is a children of `/products/**`. Would that be possible? If I use `defineRouteRules` for the path with `/partner-sale`, would if overwrite the bigger rule?
@@TheAlexLichter Thank you. Tbh, I am still confuse what different SWR and ISR? could u elaborate? And what kind server that can run SWR and ISR? Thankyou.
thanks, it's very helpful to me. But I have a small question, can the ISR effect be achieved with Nitro server alone? Does it have to rely on a platform like Vercel or Netlify? I tried it locally, but it didn’t work.
What exactly is cached in SWR? Is it behaving like a pregenerated site where the finished html is cached gets send to the user or is it just the api response thats cached and it behaves like ssr without the need to wait for the api call to finish?
If you cache a route, then the route response is cached (so the "response" that'll be sent to the client). If you cache /abc then it is the HTML. /api/abc -> only the API call.
@@TheAlexLichter Okay thx. Seems like for some reason the payload gets transfered with the html in SWR, thats the difference in kb i have. Should it be like this or do you think i have some error in my code? *Using { swr: true } in routeroules for the page
Ive created a new testapp and the kb with swr is still way higher then ssg, the difference is just that the payload is inside the html with swr and not in ssg, maybe its the correct behaviour and nuxt needs the payload in swr to check for differences when revalidating?
What is your favorite route rule? And who will I see in Berlin? 👀
I like the redirect rule for bypassing adblocks blocking analytics XD
Yo Alex great video ❤
Quick question:
It would be great if layouts can behave differently than from the page components or have an option for that in definePageMeta 🤔 don't you think ❓
One use case would be to disable JS for a static rouute while the header is still interactive 😊
So looking forward to the Nuxt server components video!! Really like your teaching style!!
It's would be awesome to have a similar in-depth server components/pages video 🙂
Totally agree, i sometime try to use them, but i always find myself stuck in s super wierd bug i can't really easily solve, so i just do things the traditional way. Would be super cool to present Nuxt 4, like a server component update.
That will come for sure!
Thanks for this one, Alex!
I like this direct approach of methodically exposing the matter with some nice examples.
This episode helps one to better understand Nuxt's capabilities and these examples demonstrate the extraordinary ease of use.
People want to be able to find info on how to solve real-world problems/use cases, and such a content is right on spot.
Your patient teaching tone as if you are explaining something to a five-year old makes complex topics feel naturally simple.
Every Friday is a kind of a holiday for me, and I'm always looking forward to the next episode.
Kindest regards!
I don't usually comment on videos but this one was hugely helpful in trying to get my site more performant. That inline script trick for handling, in my case, the prefers-color-scheme setting for the user so that I don't have a flash of light/dark theme as the page loads was mint 👌
Thank you so much for commenting then 🙏🏻
Really glad to hear that the performance of your site improved! 🔥
Great video!
It would be interesting to learn more about cached api too
Coming soon! 💪
Thanks so much for this overview!
Any time! 🫡
Well done Alex. This video has been needed for aaaaages!
Planned to do it for ages but finally managed to 👏🏻
Great content as always. Would be great if Nuxt allowed to add getKey, shouldInvalidateCache and shouldBypassCache in the config for page routes. We had to set last-modified header property to undefined in a ntiro plugin to prevent Nuxt from creating a cache version under certain circumstances (Storyblok Live Preview mode). Otherwise we would always see a cached version while editing.
Lots of people have that request but the content of the nuxt.config.ts has to stay serializable, so unfortunately that's not possible :/
But the Nitro cache handler has options for it!
Thanks a ton for this video, exactly what I needed to know right on time 😊
Perfect timing indeed! You are welcome 🙌
Thank you for this very detailled video! I didn't know about experimentalNoScripts, this is such a nice feature!
Awesome video!
Thank you 🙏
It all can be pretty confusing to understand, until you have a specific need for one of these modes in your app, then everything makes sense. It is much harder to understand options for problems you didn't have to solve in your own journey yet.
Thanks for creating this video!
As a beginner studying Nuxt.js, your videos have always been very helpful to me.
I'm curious whether I've understood this video correctly, and I have a question regarding it.
Here are my conclusions about the rendering modes with corresponding configuration codes. Could you point out any mistakes?
CSR: ssr: false
SSR: ssr: true
SSG: static: true || isr: true
ISR: isr: 3600
In this codes, I am confused about the SSG setting. Is my code correct?
Hey, Alex! Nice video!
One quick question: how would it work for specific dynamic routes?
Lets say we have `/products/${product-slug}` that can use SWR and a harder cache rule and for this case we can have `/products/**: { swr: true }` as a rule.
But in case we have a specific route for partners that we need to validate in time and no cache is allowed, something like `/products/${product-slug}/partner-sale`. This one would be better to have `swr: false`, but it is a children of `/products/**`.
Would that be possible? If I use `defineRouteRules` for the path with `/partner-sale`, would if overwrite the bigger rule?
(The answer sure can be "you go test yourself, you little mf", lol)
Great ! What about on demand cache invalidation ?
Can be achieved with a bit of legwork! Will make a video about it 👌🏻
Is it possible to have SWR not only on initial page load but also when navigating from inside the app?
If you SWR your /api routes (only) then yes. Otherwise sadly not at the moment
What is the difference between static and prerendering, as both will need a new build no? isn't prerendering equal to SSG?
Pre-rendering = SSG (build time), static = indefinite caching during runtime when the page was hit the first time
@@TheAlexLichter that answer is exactly what I was looking for.
Nice video!
When user admin update the product data like price, I would like the admin system trigger revalidate swr cached? Is is possible?
Absolutely! Explained in
ua-cam.com/video/KN5e2Hh6uC0/v-deo.html in detail
@@TheAlexLichter Thank you.
Tbh, I am still confuse what different SWR and ISR? could u elaborate? And what kind server that can run SWR and ISR? Thankyou.
thanks, it's very helpful to me. But I have a small question, can the ISR effect be achieved with Nitro server alone? Does it have to rely on a platform like Vercel or Netlify? I tried it locally, but it didn’t work.
ISR itself is only available on certain platforms (Vercel, Netlify).
But SWR is everywhere!
@@TheAlexLichter Yes，I tried. it’s working when using SWR
Is it possible to programmatically invalidate the cache for route rule?
Yes, similar to ua-cam.com/video/KN5e2Hh6uC0/v-deo.html (but you need to figure out the cache key)
What exactly is cached in SWR? Is it behaving like a pregenerated site where the finished html is cached gets send to the user or is it just the api response thats cached and it behaves like ssr without the need to wait for the api call to finish?
If you cache a route, then the route response is cached (so the "response" that'll be sent to the client). If you cache /abc then it is the HTML. /api/abc -> only the API call.
@@TheAlexLichter THX for your answer
Prerender: Only once and at build time
SWR: Once at runtime, then again in the background after the ttl is expired. Then kB shouldn't be different
@@TheAlexLichter Okay thx. Seems like for some reason the payload gets transfered with the html in SWR, thats the difference in kb i have. Should it be like this or do you think i have some error in my code? *Using { swr: true } in routeroules for the page
Ive created a new testapp and the kb with swr is still way higher then ssg, the difference is just that the payload is inside the html with swr and not in ssg, maybe its the correct behaviour and nuxt needs the payload in swr to check for differences when revalidating?
Класс 👍