Nuxt 3.10 - Speed up your build time with sharedPrerenderData
Вставка
- Опубліковано 9 лип 2024
- ⏰ Nuxt 3.10 is out for a few days and brought quite some features! One of them is especially helpful for prerendered, often content-heavy sites. But what is it and how will it reduce our build time? Together we will have a look at the new experimental sharedPrerenderData features, figure out what it is and how it works!
Key points:
🆕 Showcasing one of the new Nuxt 3.10 features
🤝 Improving a small demo-app hands-on
👩💻 Going through the internals step by step
---
Links:
🔗 Daniel Roe's blog post about his implementation: roe.dev/blog/shared-data-nuxt...
🔗 Nuxt 3.10 Announcement: nuxt.com/blog/v3-10
🔗 PR: github.com/nuxt/nuxt/pull/24894
🔗 Code: github.com/manniL/alexander-l...
🔗 The old "payload" feature in Nuxt 2: v2.nuxt.com/docs/configuratio...
📺️ Why you should use useState() - • Why you should use use...
📺️ Do you use useFetch wrong?! - • You are using useFetch...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
Chapters:
00:00 Intro
00:55 What does sharedPrerenderData do?
02:09 Demo app setup and first rendering
05:35 How to reduce duplicate calls?
06:26 Using sharedPrerenderData!
08:19 The important prerequisite
09:08 Implementation in Nuxt
11:57 TL;DR and Summary
Keywords:
shared Prerender Data nuxt sharedPrerenderData - Наука та технологія
Anyone using prerendering here? 🙌
yeah, the crawler engine saved my life ! :D
Yes, it's great for static pages such as login or register
Yeah static generation time went way down. Gracias!!
Man, your content are awesome. Keep doing it. 🇧🇷
Thanks at lot! I'll keep going 🙌🙌
Although I don’t use prerender with Nuxt, thanks for the great video anyway 😊
Frankly, I didn’t expect this video covers the implementation of the new feature. It’s really informative to have further detail about how the new feature works under the hood rather than simply giving a demo, which helps many beginners who may have hard time understanding the PR without some explanation. Good job Alex 👍
Glad you enjoyed it!
Yes, I like to dive into the PRs a lot and show what is "under the hood" - with as much "prerequisites" as possible. I'm happy to hear that this is insightful 👏
Watching your videos every week is awesome for me! Thank you! ❤
You are so welcome! Delighted that they help 🎉🙏
Great video alongside your payload optimization video. I'm gonna go through all my data fetches to optimize thanks to your lessons here. I'd love it if you could put out video about reducing static website page sizes using Nuxt 3, Tailwind module, and Nuxt UI & UI-Pro modules. Simple landing page is almost 400 kb with Tailwind JIT and when applying PurgeCSS module, the static page looks nothing like the dev page (yech) and is still large, e.g. 200 kb with the inline styles. The whole point of static pages is good UX yet these bloated pages with unused css and font faces cost a lot more to deliver than a potentially clean static page. I'm pretty certain that you have this knowledge in you and that I won't be the only person to appreciate it. Salud and thank you again!!
Another fantastic video! Although I don't use prerendering yet, I enjoy watching every video you create and really appreciate you sharing your knowledge with the community! It's a pity the documentation isn't clear enough regarding the topics you mentioned (not just this specific one), I stuck with the original documentation several times until I found a better explanation on your channel
Glad you like my content and follow it along! 🙏
The problem with docs is often that you can't have both, a "minimal" example + explanation *and* some more context + deeper info. Maybe incorporating these videos in the docs could help there?
@@TheAlexLichter Great idea! Surely adding more details wouldn't hurt the documentation and would definitely help someone.
Thanks for the great video!
I hope you can create a video about nuxtjs pattern to call api
My pleasure!
What kind of patterns you think of? More architectural?
I've talked about useFetch vs. $fetch a little bit in ua-cam.com/video/njsGVmcWviY/v-deo.html
Your note about adding the key - that key gave me a hard time this past week.... we have a composable for data fetching that injects someheaders and stuff and everything worked great, but in production some of the requests wouldnt fire again after refresh and we just didnt know whats going on!
We switched to useAsyncData and added a uuid as a key - fixed everything.
Thanks for sharing this!
Yes, a key can help so much, especially because the auto-generated key does not help if you e.g. use the composable based on a route slug or similar. Glad to hear it resolved some issues!
@@TheAlexLichter
Ya, learned a good lesson from that...
But one thing I dont understand is why for some request it worked fine and for some it didnt?
And even more than that - whtly in the world did the composable fetch the data correctly after refresh in dev server but in production it didnt?? It is so much harder to dsbug production...
Probably because the "automated" key could not capture what the "actual" key is about. Think of e.g. a route slug: If you use an automated key for useAsyncData, it does not know that it is based on the route. For useFetch, it should auto detect that when you use it in the route or the params.
For dev vs prod - it depends also if you prerender the site or not.
I'm using alternative approach that doesn't rely on crawler and doesn't make extra requests because of concurrency, much like nuxt 2 implementation. I wanted to write an article about it but it has become slower since nuxt 3.9, going to investigate first...
This implementation shouldn't make extra request for the first batch either! And instead of the crawler you can specify the routes manually too 🙌
Hey, @@TheAlexLichter! I know this probably isn’t the best place to ask for this, but when using the i18n module with the crawler disabled, is there a way to ignore all but the index.html and static status pages from prerendering? Currently it seems that the only way to exclude them is to manually add them to the ignore list. For example, all the locale index pages get generated.
@uplaymedia You could probably use the prerender:routes hook and check there programmatically or create an array based on language + path :)
Or better would be using nitro.prerender.ignore as function then :)
This helped speed up thing by quite a bit in the projects i tested, very good overview!
As a video suggestion and what i would love to learn, is a method to cache stuff without creating a huge bundle ?
Perfect! Glad it worked in your project 🙌
How do you mean "to cache stuff without creating a huge bundle"? 👀
Thank you soo much. really helpful as always. tell us more about experimental features please.
You are very welcome 🙏
Do you have any experimental feature in mind or "generally" about new experimental features?
Hey, could you please create a video explaining how different rendering modes work? It would be great if you could cover topics such as prerendering, how it works, and also explore other rendering modes. Additionally, I'm curious if Nuxt does anything different in this regard. Thanks!
Thanks for the idea! It is up on the list 👌
This video's nice 👌
Was wondering if you could create a compilation of all Nitro's methods and their use cases
Thank you!
All of them would be a looot 😁
But maybe it could be an interesting series. 👀
Thx! Also for taking us into the pull request. I don't use it already, but maybe I have a use case for this!
I have some menu's that could be pre-rendered I think. But the only thing to re-fetch this is by run prepare and rebuild and deploy the website?
Of course! You are welcome 🙌
Yes, prerendering means you need to redeploy if content changes. Not so with e.g. cached functions and a server running
Excellent ! Just a question as I am not sure to understand what you say at the very end, does this work with nuxt build (not generate) and some routerules set as prerender ?
It should work also when prerendering some of the routes via route rules, yes!
@@TheAlexLichter thanks !
only suitable for static web side use, correct?
For each route that is prerendered. So either via "nuxt generate" or when using the prerender route rule 👌
Thanks but how do you setup a key on useasync data can you create a video on that??❤❤
Use the first parameter for the key!
useAsyncData('your-key-here', async () => { /* your async function */ })
Docs: nuxt.com/docs/api/composables/use-async-data
Nuxt 4 time? 👀
In the future for sure! 👀
wait what is patches?
I locally "changed" the code of nitro. So I applied a "patch" to it :)
You need to work on the camera focus. You move your head back an inch or two and you become noticeably blurry...
The camera is usually on autofocus, but that didn’t work for the last shot for whatever reason. Thanks for the heads up! ☺️👌🏻