\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_",[2939,2940],{"name":2893,"color":2894},{"name":2868,"color":2869},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.6851581,{"description":2947,"labels":2948,"number":2953,"owner":2871,"repository":2871,"state":2897,"title":2954,"updated_at":2955,"url":2956,"score":2957},"\u003C!-- 💚 Thanks for your time to make Nuxt better with your feedbacks 💚\r\n\r\n**IMPORTANT** Before reporting a bug:\r\n\r\n- Please make sure that you have read through Nuxt documentation: https://nuxtjs.org\r\n- If issue is related to a module please create the issue in corresponding repository\r\n- Ensure using latest version of nuxt dependencies using `yarn upgrade nuxt` or `npm upgrade nuxt`\r\n\r\n👍 A properly detailed bug report can save a LOT of time and help fixing issues as soon as possible.\r\n-->\r\n\r\n### Versions\r\n\r\n- @nuxtjs/component-cache: v1.1.6\r\n- nuxt: v2.15.4\r\n- node: v10.24.1\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/s/runtime-paper-n0yom\r\n\r\nThe same issue described in this ticket - https://github.com/nuxt/nuxt.js/issues/7161, but it was closed.\r\n\r\n### Steps to reproduce\r\n\r\nOpen the page, than refresh it.\r\n\r\n### What is Expected?\r\n\r\nPage should render the `links` and show no errors in the console.\r\n\r\n### What is actually happening?\r\n\r\nNo `links` rendered and hydration error in the console - ```Mismatching childNodes vs. VNodes```.",[2949,2950],{"name":2868,"color":2869},{"name":2951,"color":2952},"2.x","d4c5f9",9242,"Hydration error with fetch() and @nuxtjs/component-cache module ","2023-01-22T15:44:51Z","https://github.com/nuxt/nuxt/issues/9242",0.6874623,{"labels":2959,"number":2962,"owner":2871,"repository":2871,"state":2897,"title":2963,"updated_at":2964,"url":2965,"score":2966},[2960,2961],{"name":2868,"color":2869},{"name":2951,"color":2952},10387,"Hydration recalls fetch() of components which are directly used in v-for","2024-06-30T09:25:14Z","https://github.com/nuxt/nuxt/issues/10387",0.69052666,{"description":2968,"labels":2969,"number":2972,"owner":2871,"repository":2871,"state":2897,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v20.0.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.5\r\n- Package Manager: npm@9.6.4\r\n- Builder: -\r\n- User Config: app, runtimeConfig, css, googleFonts, modules, devtools, srcDir, dir, alias, pinia\r\n- Runtime Modules: nuxt-swiper@1.2.2, @nuxtjs/google-fonts@3.2.0, @pinia/nuxt@0.5.1, @nuxtjs/eslint-module@4.1.0\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-u2kiq1?file=app.vue\n\n### Describe the bug\n\nMy application needs to share asynchronous information between two adjacent component, but hydration errors are returned to me and this is very frustrating.\r\n\r\nlook example below, simple application using useState, but we have a same error using Pinia\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-u2kiq1?file=app.vue\r\n\r\n\r\nWhere am I going wrong?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration node mismatch:\r\n- rendered on server: \u003C!----> \r\n- expected on client: div\n```\n",[2970,2971],{"name":2893,"color":2894},{"name":2868,"color":2869},26508,"Hydration error using asynchronous global state (Pinia, useState) between adjacent component","2024-05-09T20:31:44Z","https://github.com/nuxt/nuxt/issues/26508",0.69134057,["Reactive",2978],{},["Set"],["ShallowReactive",2981],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpdNEV5w2cUTjxIHOfaTN2wYvJ0mE9-33y9VcfFG5eBw":-1},"/nuxt/ui/2919"]