The different usage of cache: The different ways with routeRules; is there a way to invalidate cache with a query string; how to use useNuxtDate, refreshData... And another mysterious topic is the use of nitro api on static generated site (for a form for example), is that possible ?
@@fabricec2074Lots of good ideas there! A quick answer regarding Nitro + SSG: * If you use `nuxt generate` - no, because you get only static files. Then you could deploy a separate Nitro instance. * Another option would be to use the prerender routeRule and prerender all the pages (or e.g. use ISR) and have a server running serving Nitro API endpoints. Bother are valid ways, while 2nd is more integrated and easier - but it depends on the project what fits best 😊
@@TheAlexLichter Thank you ! But please make a video about cache and cache invalidation... how to, for example, use isr:true (or isr with a huge number if not possible) in a routeRule and revalidate on demand through a query string. this would be great when you use a wordpress as a headless cms... Another topic is shared server state... for example, if on a home page you have a list of posts, then on a single post if you want a few posts displayed at the bottom and maybe you don't need to refetch all posts but use some cached data if it exists...
Loving the new videos and everything I’ve seen is everything I’ve wanted to see about Nuxt. I like the deep dives on the individual pieces of nuxt. Keep making videos!
Finally makes sense. Thanks Alexander. The docs really should mention that it's usefull in SSG and SSR). I didn't see the point of 'pick' at first (which is simplified version of transform as I see it now).
Brilliant video, thanks a lot for it! Saw it recently, checked my project, noticed that payload was unnecessary huge, then spent a lot of time refactoring code to get payload smaller. Now loading data has 2 steps: converting source data to smallest possible payload, converting that payload into usable big chunk of data. Works very well. Glad I saw it while code is still in development, would have been embarrassing to push code in production that loads massive payload.
Hey Alex! Love your content and the way you explain stuff - thanks a lot! I would absolutely love a video about data fetching in regards of preformence - how do I make sure data is fetched only on server/client? What type of data should be fetched on server/client? How to maximize preformence in a heavy data fetching app?
Nice explanation. But I also expected that you would say something about server components. I haven't played with them, but I guess the data used for them is also excluded from __NUXT__. Or maybe it is a nice topic for a new video
Great addition! Yes, server components emit only the HTML and would be a viable way too. Though they also have downsides. I'll make a video about them as soon as they are a bit more mature (or maybe one soon and one after bigger updates)
You can use them if you want (I am not a big fan) but you have to keep in mind possible serialization issues (as shown in ua-cam.com/video/8w6ffRBs8a4/v-deo.html) when using classes
A part should be inlined as critical CSS anyway but to inline "the rest" is a good question 🤔 I think it is determined by the file size to avoid roundtrip overhead if the file would be too small.
Same idea in Nuxt 2 - but here you can optimize the return value of `asyncData`. Prune all unnecessary fields, remove all nested objects that you don't need etc. etc. 👌
If you can't change the API, you can use the `transform` option to remove them *or* add a "proxy API endpoint" via Nitro which calls the external API and removes them there 😊 The first option is easier to implement and will work without a server running while the second one gives even better performance (+options for server-side caching and more), but requires Nitro running so the API is accessible.
In SSG scenarios when you load a big json file (eg translations or other data). Does it drop the unused data automatically or you have to use something like `pick` ?
No, it should *not* "tree-shake" JSON automatically. Best would be using a nitro api endpoint and send only what is needed and/or use pick/transform ☺️
Приветствую, Александр. Раньше не обращал внимание на такую оптимизацию, потому что не знал. Обычно выводишь из объекта нужные данные, а остальные не важно. Теперь знаю, что важно. Благодарю. Та же оптимизация при использовании pick, верно?
What are *your* open questions with regards to Performance and Nuxt?
The different usage of cache: The different ways with routeRules; is there a way to invalidate cache with a query string; how to use useNuxtDate, refreshData... And another mysterious topic is the use of nitro api on static generated site (for a form for example), is that possible ?
@@fabricec2074Lots of good ideas there!
A quick answer regarding Nitro + SSG:
* If you use `nuxt generate` - no, because you get only static files. Then you could deploy a separate Nitro instance.
* Another option would be to use the prerender routeRule and prerender all the pages (or e.g. use ISR) and have a server running serving Nitro API endpoints.
Bother are valid ways, while 2nd is more integrated and easier - but it depends on the project what fits best 😊
@@TheAlexLichter Thank you ! But please make a video about cache and cache invalidation... how to, for example, use isr:true (or isr with a huge number if not possible) in a routeRule and revalidate on demand through a query string. this would be great when you use a wordpress as a headless cms... Another topic is shared server state... for example, if on a home page you have a list of posts, then on a single post if you want a few posts displayed at the bottom and maybe you don't need to refetch all posts but use some cached data if it exists...
there's nothing better when explained by the core team, thanks
You are more than welcome ☺️
Loving the new videos and everything I’ve seen is everything I’ve wanted to see about Nuxt.
I like the deep dives on the individual pieces of nuxt. Keep making videos!
Glad you like them Sean! I'll definitely keep them coming 🙌
Finally makes sense. Thanks Alexander.
The docs really should mention that it's usefull in SSG and SSR). I didn't see the point of 'pick' at first (which is simplified version of transform as I see it now).
You are welcome! 😊
Good point - I think opening a PR would definitely help there to improve the docs 👌
Extremely interesting and hands-on content! Thank you very much, absolutely looking forward to the next videos of the series!
Thank you Elise! So great to see so many people enjoying the video ☺️🙏🏻
The next one will be release on Friday 👏🏻
Brilliant video, thanks a lot for it!
Saw it recently, checked my project, noticed that payload was unnecessary huge, then spent a lot of time refactoring code to get payload smaller. Now loading data has 2 steps: converting source data to smallest possible payload, converting that payload into usable big chunk of data. Works very well.
Glad I saw it while code is still in development, would have been embarrassing to push code in production that loads massive payload.
You are welcome! Glad it helped you right away ✨🙏
Thanks! it was helpful. I hope to come more videos about performance!
Sure thing there will ✨🙌
Hey Alex!
Love your content and the way you explain stuff - thanks a lot!
I would absolutely love a video about data fetching in regards of preformence - how do I make sure data is fetched only on server/client? What type of data should be fetched on server/client? How to maximize preformence in a heavy data fetching app?
Thank you for your comment and the kind words 🙌
Great idea - noted!
Thanks Alex. I am waiting for next video about better performance in NUXT.
You are welcome! The next video comes next Friday 🙌 Stay tuned ✨
That's very helpful. Thank you ;)
You are welcome Umer! 🙏
Please also make video about nuxt 2 and nuxt bridge.
Nuxt Bridge is definitely planned! More Nuxt 2 focused videos - except maybe more migration topics - are sadly not on my list.
great job
Thanks!
thank you.
You're welcome
how about the pick options for useFecth? Is it the same with transform?
You got it! The same idea (and benefits) but even a tad shorter 👍
+1 subscribe, thanks Alex!
Of course! You are welcome 🙌🏻
please keep doing it
Will do 🙌
Nice explanation. But I also expected that you would say something about server components. I haven't played with them, but I guess the data used for them is also excluded from __NUXT__. Or maybe it is a nice topic for a new video
Great addition! Yes, server components emit only the HTML and would be a viable way too. Though they also have downsides.
I'll make a video about them as soon as they are a bit more mature (or maybe one soon and one after bigger updates)
I couldn't wrap my head around server component idea. Would love to see that video at some point! 😊
Noted 🙊
Amazing content
Thank youuu 🙏🏻
wow! thanks alex, it was good,how about using class-transformer?
You can use them if you want (I am not a big fan) but you have to keep in mind possible serialization issues (as shown in ua-cam.com/video/8w6ffRBs8a4/v-deo.html) when using classes
Deep Things
And going deep again on Friday!
cool talk - please keep it going....
Thank you Michael! Will do 🙌 One new video every Friday ✔
Use the pick option in useFetch to achieve the same effect?
Yes, that's a "shorter way" to do so 👌
how to build tailwind to a separate file instead of my prerendered index.html?
A part should be inlined as critical CSS anyway but to inline "the rest" is a good question 🤔
I think it is determined by the file size to avoid roundtrip overhead if the file would be too small.
im looking for answer that question in nuxt 2 almost 2 months so what is the solution for nuxt 2 . Ty btw
Same idea in Nuxt 2 - but here you can optimize the return value of `asyncData`. Prune all unnecessary fields, remove all nested objects that you don't need etc. etc. 👌
@@TheAlexLichter ❤
How can we follow another path if certain fields are coming from the API?
If you can't change the API, you can use the `transform` option to remove them *or* add a "proxy API endpoint" via Nitro which calls the external API and removes them there 😊
The first option is easier to implement and will work without a server running while the second one gives even better performance (+options for server-side caching and more), but requires Nitro running so the API is accessible.
Does this transform option work as interceptors ?🤔
You can think of it as a "payload interceptor", yes. But useFetch also has response interceptors (powered by via `ofetch` )😁
In SSG scenarios when you load a big json file (eg translations or other data).
Does it drop the unused data automatically or you have to use something like `pick` ?
No, it should *not* "tree-shake" JSON automatically. Best would be using a nitro api endpoint and send only what is needed and/or use pick/transform ☺️
Приветствую, Александр. Раньше не обращал внимание на такую оптимизацию, потому что не знал. Обычно выводишь из объекта нужные данные, а остальные не важно. Теперь знаю, что важно. Благодарю.
Та же оптимизация при использовании pick, верно?
Пожалуйста! Да, для пикинга действуют те же преимущества по производительности 🙌
Woahh what a new learning 🫡
Happy it was helpful 👌🏻