\r\n \u003C/NuxtLazyHydrate>\r\n \u003C/section>\r\n \u003Csection class=\"mb-10 grid-in-right md:mb-0\">\r\n \u003CNuxtLazyHydrate when-idle>\r\n \u003CUiPurchaseCard v-if=\"product\" :product=\"product\" />\r\n \u003C/NuxtLazyHydrate>\r\n \u003C/section>\r\n \u003Csection class=\"grid-in-left-bottom md:mt-8\">\r\n \u003CUiDivider class=\"mb-6\" />\r\n \u003CNuxtLazyHydrate when-visible>\r\n \u003CProductProperties v-if=\"product\" :product=\"product\" />\r\n \u003C/NuxtLazyHydrate>\r\n \u003CUiDivider class=\"mt-4 mb-2 md:mt-8\" />\r\n \u003CNuxtLazyHydrate when-visible>\r\n \u003CProductAccordion v-if=\"product\" :product=\"product\" />\r\n \u003C/NuxtLazyHydrate>\r\n \u003C/section>\r\n \u003CUiDivider class=\"mt-4 mb-2\" />\r\n\u003C/div>\r\n\u003Csection class=\"mx-4 mt-28 mb-20\">\r\n \u003CNuxtLazyHydrate when-visible>\r\n \u003CRecommendedProducts v-if=\"recommendedProducts\" :products=\"recommendedProducts\" />\r\n \u003C/NuxtLazyHydrate>\r\n\u003C/section>\r\n```\r\nA directive would be a much more elegant approach that fixes this small but definitely annoying DX flaw.\r\n\r\n### `hydrate` directive\r\n\r\nThe idea is simple - introduce global `hydrate` directive that can control when components are hydrated.\r\n\r\n```html\r\n\u003C!-- Hydrate when certain event is triggered -->\r\n\u003CMyComponent hydrate:on=\"['click', 'touchstart']\" />\r\n\u003C!-- Hydrate when certain condition is met -->\r\n\u003CMyComponent hydrate:when=\"shouldHydrate === true\" />\r\n\u003C!-- Hydrate when element is in the viewport -->\r\n\u003CMyComponent hydrate:when-visible />\r\n\u003C!-- Hydrate when element is in the viewport (with an offset) -->\r\n\u003CMyComponent hydrate:when-visible=\"{ rootMargin: '100px' }\" />\r\n\u003C!-- Hydrate when browser is idle (requestIdelCallback) -->\r\n\u003CMyComponent hydrate:when-idle />\r\n\u003C!-- Hydrate when browser is idle with maximum timeout -->\r\n\u003CMyComponent hydrate:when-idle=\"4000\" />\r\n\u003C!-- Never Hydrate, works just like \u003CNuxtIsland> -->\r\n\u003CMyComponent hydrate:never />\r\n```\r\n\r\n### Hydration callback\r\n\r\nHaving a hydration callback could make it easier to react to components hydration from it's parent.\r\n\r\n```html\r\n\u003CMyComponent @hydrated=\"callback\" />\r\n```\r\nIt would be useful when we want to hydrate a set of compoennts in particular order.\r\n\r\n```html\r\n\u003Ctemplate>\r\n \u003CMyComponentA hydrate:when=\"hydrateA\" @hydrated=\"hydrateB = true\" />\r\n \u003CMyComponentB hydrate:when=\"hydrateB\" />\r\n \u003Cbutton @click=\"hydrateA = true\">Start hydration\u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst hydrateA = ref(false)\r\nconst hydrateB = ref(false)\r\n\u003C/script>\r\n```\r\n\r\n### Hydration Wrapper\r\n\r\nWe can use already existing `NuxtIsland` component to wrap multiple components/nodes at once.\r\n\r\n```html\r\n\u003CNuxtIsland hydrate:never>\r\n \u003Cdiv> {{ message }} \u003C/div>\r\n \u003CMyComponentA />\r\n \u003CMyComponentB />\r\n \u003CMyComponentC />\r\n\u003C/NuxtIsland>\r\n```\r\n\r\n### Framework-level optimizations\r\n\r\nThanks to component auto-imports we can statically analyze the code and specify which components chunks should be lazy-loaded as build-time optimization.\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [X] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3054,3055,3058,3061],{"name":3044,"color":3045},{"name":3056,"color":3057},"dx","C39D69",{"name":3059,"color":3060},"🍰 p2-nice-to-have","0E8A16",{"name":3062,"color":3063},"performance","E84B77",24242,"closed","Lazy Hydration in Nuxt Core","2025-02-28T23:19:19Z","https://github.com/nuxt/nuxt/issues/24242",0.7563931,{"labels":3071,"number":3080,"owner":3033,"repository":3033,"state":3065,"title":3081,"updated_at":3082,"url":3083,"score":3084},[3072,3074,3077],{"name":3073,"color":3031},"stale",{"name":3075,"color":3076},"pending triage","E99695",{"name":3078,"color":3079},"2.x","d4c5f9",7794,"[SEO Optimization] Huge LCP(Largest Content Paint) on Full Static rendering html with v-html","2023-01-22T15:36:04Z","https://github.com/nuxt/nuxt/issues/7794",0.7574972,{"labels":3086,"number":3089,"owner":3033,"repository":3033,"state":3065,"title":3090,"updated_at":3091,"url":3092,"score":3093},[3087,3088],{"name":3075,"color":3076},{"name":3078,"color":3079},6669,"Possible memory leak with nuxt-link and/or router-link","2024-06-30T09:26:11Z","https://github.com/nuxt/nuxt/issues/6669",0.75923914,{"description":3095,"labels":3096,"number":3101,"owner":3033,"repository":3033,"state":3065,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### Describe the feature\r\n\r\nIs there API that can allow to control hydration state?\r\n\r\nFor example\r\n```\r\n\u003Cscript lang=\"ts\" setup>\r\n// 1. SSR => fetch data with 300kb links\r\nconst { data } = await useAsyncData(() => fetch300kbData())\r\n\r\n// 2. SSR => render page\r\n\r\n// 3. SSR => remove data before html is sent to CSR\r\nafterSSRRender(() => {\r\n data.value = []\r\n})\r\n\r\n// 4. CSR => client gets html and page is rendered by browser\r\n\r\n// 5. CSR => keep page hydration in pending state\r\nbeforeCSRHydration(async () => {\r\n // 6. CSR => fetch same data that was fetched in SSR\r\n data.value = await fetch300kbData()\r\n})\r\n\r\n// 7. CSR => resolve hydration\r\n\u003C/script>\r\n```\r\n\r\nIt can give performance improvement (for example in CoreWebVitals). Lets say we have page with a lot of links, which needs to be interactive on client side. User will get html that is 300kb lighter and can see content before page is interactive. After data is refetch on client side user can interact with it.\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3097,3100],{"name":3098,"color":3099},"3.x","29bc7f",{"name":3075,"color":3076},23072,"Control hydration to refetch data on client side","2023-09-12T19:58:51Z","https://github.com/nuxt/nuxt/issues/23072",0.77458155,{"description":3107,"labels":3108,"number":3111,"owner":3033,"repository":3033,"state":3065,"title":3112,"updated_at":3113,"url":3114,"score":3115},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.2\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-kqbstc\r\n\r\n### Describe the bug\r\n\r\nWhen using dynamic components (e.g. `lazy-my-component`) \r\n```html\r\n\u003C!-- app.vue -->\r\n\u003Ctemplate>\r\n \u003Clazy-hello />\r\n\u003C/template>\r\n```\r\n\r\nand it contains a async/await in the top level (e.g. `useAsyncData`)\r\n\r\n```html\r\n\u003C!-- components/Hello.vue -->\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n {{ data }}\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\n\r\n// can be a fetch from an API\r\nconst getHello = async () => {\r\n return new Promise((resolve) => {\r\n setTimeout(() => {\r\n if (process.server) {\r\n resolve('Hello from server');\r\n return;\r\n }\r\n\r\n resolve('Hello from client');\r\n return;\r\n }, 1000);\r\n });\r\n};\r\nconst { data, refresh } = await useAsyncData\u003Cstring>(\r\n async () => {\r\n return getHello();\r\n }\r\n);\r\n\u003C/script>\r\n```\r\nthe component is rendered on the server side with the server side content, but the fetch is triggered on the client side again.\r\n\r\nThis causes a hydration error on client side.\r\n\r\nIf the component is used without `lazy-` prefix, there are no issues.\r\n\r\n### Additional context\r\nI also added the key for `useAsyncData` but it does not help. \r\n\r\nIf this is a intended design decision, please update the documentation with a corresponding warning.\r\n\r\n### Logs\r\n\r\n_No response_",[3109,3110],{"name":3098,"color":3099},{"name":3075,"color":3076},25958,"dynamic components (lazy-xyz) cause hydration error, if the component contains await in setup","2024-02-26T12:11:26Z","https://github.com/nuxt/nuxt/issues/25958",0.77747756,{"description":3117,"labels":3118,"number":3125,"owner":3033,"repository":3033,"state":3065,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### Describe the feature\n\nHi,\r\n\r\n### Current Problem\r\nNuxt js currently preload then execute the scripts at the bottom of the body for priority boosting. But `link:rel=preload` doesn't have greater browser support so I'm browser which doesn't support it will take long time to fetch and execute it.\r\n\r\n\r\n\r\n### Solution\r\n\r\nI propose an alternate approach to load first party script with defer, where `\u003Cscript defer>` will be added to the , with the objective of streamlining the overall loading sequence, modeling web-performance best practices, and moving away from preload as a crutch for signal boosting.\r\n\r\nBrowser compatibility (MDN) -:\r\n\r\n`\u003Clink rel=\"preload\" />`\r\n\r\n\r\n`\u003Cscript defer>`\r\n\r\n\r\n### Advantages \r\n\r\n- Scripts wont block the HTML parsing as intended.\r\n\r\n\r\n- Improvements in FCP, LCP metric, faster time to visual-completeness.\r\n\r\n- Additional optimization and predictability given the guaranteed order of execution of defer scripts.\r\n\r\n\r\n### Issue when implementing\r\n\r\nThis works perfectly fine for `type=module`(automatically adds defer attr) scripts too but for them preloading having some benefits so we need to conditionally add preload tag if it is targeted to new module based syntax.\r\n\r\n### References\r\n\r\nCurrent Next js implementation (Please check this out for better understanding)-: https://github.com/vercel/next.js/discussions/24938\r\n\r\nAbout scripts loading-: https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6\r\n\r\nIssues of preloading-: https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/\r\n___\r\n\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[3119,3120,3123,3124],{"name":3044,"color":3045},{"name":3121,"color":3122},"discussion","538de2",{"name":3098,"color":3099},{"name":3062,"color":3063},15072,"Improve loading sequence of hydration `\u003Cscript />` 🚀 ","2023-11-20T11:10:34Z","https://github.com/nuxt/nuxt/issues/15072",0.77903867,{"description":3131,"labels":3132,"number":3135,"owner":3033,"repository":3033,"state":3065,"title":3136,"updated_at":3137,"url":3138,"score":3139},"### Describe the feature\n\nThe current iteration of UCarousel primarily supports a slide transition effect for navigating through images in an autoplay mode. While this functionality serves its purpose for linear transitions, the introduction of a fade-out/in effect could significantly enhance the visual appeal and user experience. This feature request proposes the addition of an option within UCarousel to enable images to smoothly fade out and then fade in when transitioning, instead of the default slide mechanism.\r\n\r\nThe fade transition effect should be customizable, allowing developers to adjust the duration of both the fade-out and fade-in phases according to their specific needs. This feature would be optional and can be toggled based on the developer's preference, ensuring that UCarousel remains versatile for various use cases. Implementing this feature would provide a more dynamic and visually appealing way to showcase images, making UCarousel a more attractive option for developers looking to incorporate carousels in their web applications.\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3133,3134],{"name":3098,"color":3099},{"name":3075,"color":3076},26143,"Implement Fade-Out/In Transition Effect for UCarousel","2024-03-07T22:09:13Z","https://github.com/nuxt/nuxt/issues/26143",0.78133786,{"labels":3141,"number":3147,"owner":3033,"repository":3033,"state":3065,"title":3148,"updated_at":3149,"url":3150,"score":3151},[3142,3143,3144],{"name":3098,"color":3099},{"name":3075,"color":3076},{"name":3145,"color":3146},"needs reproduction","FBCA04",14462,"useLazyFetch with useRoute query not work","2023-01-19T17:35:48Z","https://github.com/nuxt/nuxt/issues/14462",0.7816355,["Reactive",3153],{},["Set"],["ShallowReactive",3156],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f9KJFcr7Cv1Ji2gXwXjeaJKlJ65sFLpcX5at9Xr_17NE":-1},"/nuxt/ui/4085"]