[{"data":1,"prerenderedAt":542},["ShallowReactive",2],{"navigation":3,"page-\u002Fen\u002Fssr":140},[4,74],{"title":5,"path":6,"stem":7,"children":8,"page":73},"En","\u002Fen","en",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69],{"title":10,"path":11,"stem":12},"Getting Started","\u002Fen\u002Fgetting-started","en\u002F1.getting-started",{"title":14,"path":15,"stem":16},"Nuxt Integration","\u002Fen\u002Fnuxt-integration","en\u002F10.nuxt-integration",{"title":18,"path":19,"stem":20},"Theming","\u002Fen\u002Ftheming","en\u002F11.theming",{"title":22,"path":23,"stem":24},"SSR","\u002Fen\u002Fssr","en\u002F12.ssr",{"title":26,"path":27,"stem":28},"Performance","\u002Fen\u002Fperformance","en\u002F13.performance",{"title":30,"path":31,"stem":32},"DevTools","\u002Fen\u002Fdevtools","en\u002F14.devtools",{"title":34,"path":35,"stem":36},"FAQ","\u002Fen\u002Ffaq","en\u002F15.faq",{"title":38,"path":39,"stem":40},"Troubleshooting","\u002Fen\u002Ftroubleshooting","en\u002F16.troubleshooting",{"title":42,"path":43,"stem":44},"Installation","\u002Fen\u002Finstallation","en\u002F2.installation",{"title":46,"path":47,"stem":48},"Configuration","\u002Fen\u002Fconfiguration","en\u002F3.configuration",{"title":50,"path":51,"stem":52},"Basic Usage","\u002Fen\u002Fbasic-usage","en\u002F4.basic-usage",{"title":54,"path":55,"stem":56},"Advanced Usage","\u002Fen\u002Fadvanced-usage","en\u002F5.advanced-usage",{"title":58,"path":59,"stem":60},"Automatic Skeletonization","\u002Fen\u002Fautomatic-skeletonization","en\u002F6.automatic-skeletonization",{"title":62,"path":63,"stem":64},"Components","\u002Fen\u002Fcomponents","en\u002F7.components",{"title":66,"path":67,"stem":68},"Directives","\u002Fen\u002Fdirectives","en\u002F8.directives",{"title":70,"path":71,"stem":72},"Composables","\u002Fen\u002Fcomposables","en\u002F9.composables",false,{"title":75,"path":76,"stem":77,"children":78,"page":73},"It","\u002Fit","it",[79,83,87,91,94,98,101,104,108,112,116,120,124,128,132,136],{"title":80,"path":81,"stem":82},"Per iniziare","\u002Fit\u002Fgetting-started","it\u002F1.getting-started",{"title":84,"path":85,"stem":86},"Integrazione Nuxt","\u002Fit\u002Fnuxt-integration","it\u002F10.nuxt-integration",{"title":88,"path":89,"stem":90},"Temi","\u002Fit\u002Ftheming","it\u002F11.theming",{"title":22,"path":92,"stem":93},"\u002Fit\u002Fssr","it\u002F12.ssr",{"title":95,"path":96,"stem":97},"Prestazioni","\u002Fit\u002Fperformance","it\u002F13.performance",{"title":30,"path":99,"stem":100},"\u002Fit\u002Fdevtools","it\u002F14.devtools",{"title":34,"path":102,"stem":103},"\u002Fit\u002Ffaq","it\u002F15.faq",{"title":105,"path":106,"stem":107},"Risoluzione dei problemi","\u002Fit\u002Ftroubleshooting","it\u002F16.troubleshooting",{"title":109,"path":110,"stem":111},"Installazione","\u002Fit\u002Finstallation","it\u002F2.installation",{"title":113,"path":114,"stem":115},"Configurazione","\u002Fit\u002Fconfiguration","it\u002F3.configuration",{"title":117,"path":118,"stem":119},"Uso di base","\u002Fit\u002Fbasic-usage","it\u002F4.basic-usage",{"title":121,"path":122,"stem":123},"Uso avanzato","\u002Fit\u002Fadvanced-usage","it\u002F5.advanced-usage",{"title":125,"path":126,"stem":127},"Skeletonizzazione automatica","\u002Fit\u002Fautomatic-skeletonization","it\u002F6.automatic-skeletonization",{"title":129,"path":130,"stem":131},"Componenti","\u002Fit\u002Fcomponents","it\u002F7.components",{"title":133,"path":134,"stem":135},"Direttive","\u002Fit\u002Fdirectives","it\u002F8.directives",{"title":137,"path":138,"stem":139},"Composable","\u002Fit\u002Fcomposables","it\u002F9.composables",{"id":141,"title":22,"body":142,"description":537,"extension":538,"meta":539,"navigation":321,"path":23,"seo":540,"stem":24,"__hash__":541},"content\u002Fen\u002F12.ssr.md",{"type":143,"value":144,"toc":531},"minimark",[145,149,154,167,170,186,190,198,399,403,414,513,517,527],[146,147,22],"h1",{"id":148},"ssr",[150,151,153],"h2",{"id":152},"how-it-works","How it works",[155,156,157,158,162,163,166],"p",{},"The automatic engine measures and rewrites the DOM, which only exists on the client. So skeleton\npainting runs ",[159,160,161],"strong",{},"on the client, after hydration",". The server and the client's initial render are\nidentical, which means ",[159,164,165],{},"no hydration mismatch",".",[155,168,169],{},"In practice:",[171,172,173,177,180,183],"ol",{},[174,175,176],"li",{},"The server renders your real markup (or the loading branch).",[174,178,179],{},"The client hydrates that exact markup.",[174,181,182],{},"After mount, if the scope is enabled, the engine paints bones.",[174,184,185],{},"When loading completes, the originals are restored in place.",[150,187,189],{"id":188},"avoiding-a-flash","Avoiding a flash",[155,191,192,193,197],{},"Bind ",[194,195,196],"code",{},":enabled"," to your loading state so the skeleton only activates while data is pending:",[199,200,205],"pre",{"className":201,"code":202,"language":203,"meta":204,"style":204},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Lazy composables return immediately with `pending: true`, so the skeleton\n\u002F\u002F shows right after hydration and disappears when data arrives.\nconst { data, pending } = await useLazyFetch('\u002Fapi\u002Fdashboard')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSkeletonizer :enabled=\"pending\">\n    \u003CDashboard :data=\"data\" \u002F>\n  \u003C\u002FSkeletonizer>\n\u003C\u002Ftemplate>\n","vue","",[194,206,207,243,250,256,306,316,323,333,356,380,390],{"__ignoreMap":204},[208,209,212,216,220,224,227,230,234,238,240],"span",{"class":210,"line":211},"line",1,[208,213,215],{"class":214},"sP7_E","\u003C",[208,217,219],{"class":218},"sQzsp","script",[208,221,223],{"class":222},"s9AJx"," setup",[208,225,226],{"class":222}," lang",[208,228,229],{"class":214},"=",[208,231,233],{"class":232},"sjJ54","\"",[208,235,237],{"class":236},"s_sjI","ts",[208,239,233],{"class":232},[208,241,242],{"class":214},">\n",[208,244,246],{"class":210,"line":245},2,[208,247,249],{"class":248},"sutJx","\u002F\u002F Lazy composables return immediately with `pending: true`, so the skeleton\n",[208,251,253],{"class":210,"line":252},3,[208,254,255],{"class":248},"\u002F\u002F shows right after hydration and disappears when data arrives.\n",[208,257,259,263,266,270,273,276,279,283,287,291,295,298,301,303],{"class":210,"line":258},4,[208,260,262],{"class":261},"sbsja","const",[208,264,265],{"class":214}," {",[208,267,269],{"class":268},"s_hVV"," data",[208,271,272],{"class":214},",",[208,274,275],{"class":268}," pending",[208,277,278],{"class":214}," }",[208,280,282],{"class":281},"smGrS"," =",[208,284,286],{"class":285},"sVHd0"," await",[208,288,290],{"class":289},"sGLFI"," useLazyFetch",[208,292,294],{"class":293},"su5hD","(",[208,296,297],{"class":232},"'",[208,299,300],{"class":236},"\u002Fapi\u002Fdashboard",[208,302,297],{"class":232},[208,304,305],{"class":293},")\n",[208,307,309,312,314],{"class":210,"line":308},5,[208,310,311],{"class":214},"\u003C\u002F",[208,313,219],{"class":218},[208,315,242],{"class":214},[208,317,319],{"class":210,"line":318},6,[208,320,322],{"emptyLinePlaceholder":321},true,"\n",[208,324,326,328,331],{"class":210,"line":325},7,[208,327,215],{"class":214},[208,329,330],{"class":218},"template",[208,332,242],{"class":214},[208,334,336,339,342,345,347,349,352,354],{"class":210,"line":335},8,[208,337,338],{"class":214},"  \u003C",[208,340,341],{"class":218},"Skeletonizer",[208,343,344],{"class":222}," :enabled",[208,346,229],{"class":214},[208,348,233],{"class":232},[208,350,351],{"class":236},"pending",[208,353,233],{"class":232},[208,355,242],{"class":214},[208,357,359,362,365,368,370,372,375,377],{"class":210,"line":358},9,[208,360,361],{"class":214},"    \u003C",[208,363,364],{"class":218},"Dashboard",[208,366,367],{"class":222}," :data",[208,369,229],{"class":214},[208,371,233],{"class":232},[208,373,374],{"class":236},"data",[208,376,233],{"class":232},[208,378,379],{"class":214}," \u002F>\n",[208,381,383,386,388],{"class":210,"line":382},10,[208,384,385],{"class":214},"  \u003C\u002F",[208,387,341],{"class":218},[208,389,242],{"class":214},[208,391,393,395,397],{"class":210,"line":392},11,[208,394,311],{"class":214},[208,396,330],{"class":218},[208,398,242],{"class":214},[150,400,402],{"id":401},"manual-primitives-during-ssr","Manual primitives during SSR",[155,404,405,406,409,410,413],{},"The ",[194,407,408],{},"Skeleton*"," primitives are plain markup, so they ",[159,411,412],{},"are"," server-rendered. Use them when you want\nthe skeleton visible in the initial HTML (e.g. above-the-fold placeholders):",[199,415,417],{"className":201,"code":416,"language":203,"meta":204,"style":204},"\u003Ctemplate>\n  \u003Cdiv v-if=\"pending\">\n    \u003CSkeletonCard media avatar :lines=\"3\" \u002F>\n  \u003C\u002Fdiv>\n  \u003CArticleCard v-else :article=\"data\" \u002F>\n\u003C\u002Ftemplate>\n",[194,418,419,427,447,474,482,505],{"__ignoreMap":204},[208,420,421,423,425],{"class":210,"line":211},[208,422,215],{"class":214},[208,424,330],{"class":218},[208,426,242],{"class":214},[208,428,429,431,434,437,439,441,443,445],{"class":210,"line":245},[208,430,338],{"class":214},[208,432,433],{"class":218},"div",[208,435,436],{"class":222}," v-if",[208,438,229],{"class":214},[208,440,233],{"class":232},[208,442,351],{"class":236},[208,444,233],{"class":232},[208,446,242],{"class":214},[208,448,449,451,454,457,460,463,465,467,470,472],{"class":210,"line":252},[208,450,361],{"class":214},[208,452,453],{"class":218},"SkeletonCard",[208,455,456],{"class":222}," media",[208,458,459],{"class":222}," avatar",[208,461,462],{"class":222}," :lines",[208,464,229],{"class":214},[208,466,233],{"class":232},[208,468,469],{"class":236},"3",[208,471,233],{"class":232},[208,473,379],{"class":214},[208,475,476,478,480],{"class":210,"line":258},[208,477,385],{"class":214},[208,479,433],{"class":218},[208,481,242],{"class":214},[208,483,484,486,489,492,495,497,499,501,503],{"class":210,"line":308},[208,485,338],{"class":214},[208,487,488],{"class":218},"ArticleCard",[208,490,491],{"class":222}," v-else",[208,493,494],{"class":222}," :article",[208,496,229],{"class":214},[208,498,233],{"class":232},[208,500,374],{"class":236},[208,502,233],{"class":232},[208,504,379],{"class":214},[208,506,507,509,511],{"class":210,"line":318},[208,508,311],{"class":214},[208,510,330],{"class":218},[208,512,242],{"class":214},[150,514,516],{"id":515},"nitro-accessibility","Nitro & accessibility",[155,518,519,520,523,524,166],{},"The module is Nitro-compatible and the runtime plugin is SSR-safe (it no-ops DOM access on the\nserver). Painted bones are ",[194,521,522],{},"aria-hidden"," and active hosts get ",[194,525,526],{},"aria-busy",[528,529,530],"style",{},"html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":204,"searchDepth":252,"depth":252,"links":532},[533,534,535,536],{"id":152,"depth":245,"text":153},{"id":188,"depth":245,"text":189},{"id":401,"depth":245,"text":402},{"id":515,"depth":245,"text":516},"How skeletonization behaves with server-side rendering and hydration.","md",{},{"title":22,"description":537},"V8cpF7tsiXBef7EZ2rbgd8FrZZLIiStVSWS6y42wGCs",1783713298617]