\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst route = useRoute();\r\nconst uid = ref(route.params.uid[0] || \"home\");\r\n// Create the prismic endpoint.\r\nconst prism = usePrismic({ type: \"page\", uid: uid.value });\r\nconst { data: page } = await useFetch(prism.endpoint, {\r\n key: uid.value,\r\n params: prism.params,\r\n transform: (data) => {\r\n let result = data.results[0].data;\r\n // Remove unwanted special characters from the Prismic body.\r\n result = JSON.stringify(result);\r\n result = result.replace(/[\\u2028]/g, \"\");\r\n result = JSON.parse(result);\r\n return result;\r\n },\r\n});\r\n\r\n// Prepare the async loading of the slices.\r\nconst sliceList = {\r\n navigation: defineAsyncComponent(() => import(\"~/components/Navigation.vue\")),\r\n landing_hero: defineAsyncComponent(() => import(\"~/components/LandingHero.vue\")),\r\n heading: defineAsyncComponent(() => import(\"~/components/Heading.vue\")),\r\n footer: defineAsyncComponent(() => import(\"~/components/Footer.vue\")),\r\n};\r\n\u003C/script>\r\n```\r\n\r\nDuring SSG, all the content coming from Prismic is properly rendered as HTML, which is awesome.\r\n\r\n#### The issue \r\n\r\nHowever, after building and uploading the page to production, a \"flicker\" appears when visiting the page.\r\nWhen I say flicker, what I mean is: the page is visible, the page disappears, the page re-appears. \r\n\r\nThis is how it looks like on mobile:\r\n\r\n\r\n\r\nI don't encounter the issue when avoiding to dynamically load the components, like this:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CFlex direction=\"col\">\r\n \u003Ctemplate\r\n v-for=\"(slice, index) in page.body\"\r\n :key=\"`${uid}-${slice.slice_type}-${index}`\"\r\n >\r\n \u003CNavigation v-if=\"slice.slice_type === 'navigation'\" :slice=\"slice\" />\r\n \u003CLandingHero v-if=\"slice.slice_type === 'landing-hero'\" :slice=\"slice\" />\r\n \u003CHeading v-if=\"slice.slice_type === 'heading'\" :slice=\"slice\" />\r\n \u003CFooter v-if=\"slice.slice_type === 'footer'\" :slice=\"slice\" />\r\n \u003C/template>\r\n \u003C/Flex>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst route = useRoute();\r\nconst uid = ref(route.params.uid[0] || \"home\");\r\n// Create the prismic endpoint.\r\nconst prism = usePrismic({ type: \"page\", uid: uid.value });\r\nconst { data: page } = await useFetch(prism.endpoint, {\r\n key: uid.value,\r\n params: prism.params,\r\n transform: (data) => {\r\n let result = data.results[0].data;\r\n // Remove unwanted special characters from the Prismic body.\r\n result = JSON.stringify(result);\r\n result = result.replace(/[\\u2028]/g, \"\");\r\n result = JSON.parse(result);\r\n return result;\r\n },\r\n});\r\n\u003C/script>\r\n``` \r\n\r\nHowever, this is of course not maintainable when you have a longer list of components.\r\n\r\n\r\n### Additional context\r\n\r\nTime to share you additional information. Which is where I'm _really_ scratching my head.\r\n\r\n#### @nuxtjs/prismic\r\nI'm aware that what I'm doing is a custom made solution, since @nuxtjs/prismic has a v3 version. However, at the time I was using this, it was still unstable and now the [https://v3.prismic.nuxtjs.org/](https://v3.prismic.nuxtjs.org/) seems to be completely down.\r\n\r\n#### An impact of CloudFlare?\r\nOn production, there are 2 urls. For the sake of privacy, I'm gonna invent some domain names here that aren't related to this project.\r\n\r\nThe first is the official URL created by [CloudFlare pages](https://pages.cloudflare.com/) - which is how we deploy our website.\r\nThis could look like: `my-website-name.pages.dev`\r\nThe second url is added to our DNS. The path is: `nuxt.our-domain.com`, which is proxied to `my-website-name.pages.dev`\r\n\r\nOn the first URL, the flicker doesn't appear, but it does happen on the second url (`nuxt.our-domain.com`)\r\n\r\nThose who know about CloudFlare would probably ask: Did you [disable \"Rocket Loader\"](https://community.cloudflare.com/t/rocket-loader-causes-blink-flicker-on-page-load/27181)?\r\nThe flickering happens even with Rocket Loader disabled.\r\n\r\nDue to this, I'm not sure if it's a Nuxt 3 or a CloudFlare issue. So I do apologize if it ends up being the latter.\r\n\r\nRemember, I can resolve the issue with the second block in the above mentioned bug description, so maybe it's the way the components are loaded dynamically?\r\n\r\n#### Possibly a related issue\r\nThis may or may not be related to this open issue: [useHead causes flicker when hydrating SSR-rendered page](https://github.com/nuxt/nuxt.js/issues/14271). I still encounter the issue without using `useHead`, but since this user is also encountering flickering,\r\n\r\n### Logs\r\n\r\n_No response_",[2945,2948],{"name":2946,"color":2947},"3.x","29bc7f",{"name":2868,"color":2869},15019,"(SSG) Using dynamic components to load a page creates a page flicker","2023-01-19T17:43:50Z","https://github.com/nuxt/nuxt/issues/15019",0.7125647,{"description":2955,"labels":2956,"number":2959,"owner":2871,"repository":2871,"state":2888,"title":2960,"updated_at":2924,"url":2961,"score":2962},"\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- nuxt: \u003C!-- ex: v2.13.0 -->\r\n- node: \u003C!-- ex: v12.14.0 -->\r\n\r\n### Reproduction\r\n\r\n\u003C!--\r\nLink to a minimal test case based on one of:\r\n- A fork of https://template.nuxtjs.org\r\n- A GitHub repository that can reproduce the bug\r\nWithout a reproduction, it is so hard to address problem :(\r\n-->\r\n\r\n\u003Cdetails open>\r\n\u003Csummary>Additional Details\u003C/summary>\r\n\u003Cbr>\r\n\u003C!-- Attaching `nuxt.config`, dependencies, logs or code snippets would help to find the issue -->\r\n\u003C/details>\r\n\r\n### Steps to reproduce\r\n\r\n\r\n### What is Expected?\r\n\r\n\r\n### What is actually happening?\r\n",[2957,2958],{"name":2868,"color":2869},{"name":2901,"color":2902},9218,"ssr:false: Page A window.locaton.href Jump to page B; page B need to jump twice(window.history.go(-1))","https://github.com/nuxt/nuxt/issues/9218",0.71278274,{"labels":2964,"number":2967,"owner":2871,"repository":2871,"state":2888,"title":2968,"updated_at":2969,"url":2970,"score":2971},[2965,2966],{"name":2868,"color":2869},{"name":2901,"color":2902},7915,"Nuxt memory leak universal mode","2023-01-22T15:36:07Z","https://github.com/nuxt/nuxt/issues/7915",0.7135021,{"labels":2973,"number":2977,"owner":2871,"repository":2871,"state":2888,"title":2978,"updated_at":2979,"url":2980,"score":2981},[2974,2975,2976],{"name":2897,"color":2898},{"name":2868,"color":2869},{"name":2901,"color":2902},10059,"Can't open more than 3 tabs","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10059",0.7162575,["Reactive",2983],{},["Set"],["ShallowReactive",2986],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1EWIbb9H_JS_HgOFoueGnU1gdrD7XNXwSSUSDc4T1kc":-1},"/nuxt/ui/4280"]