CSS not loaded for not hydrated components with lazy hydration - is this expected?

[angelov-a]

We have some components that hydrate on visible and have no styling prior to hydration. This causes # links to not scroll to the correct position since hydrate-on-visible components change their height mid-scroll.

[tt-a1i]

Yes, this is expected behavior with Vue's lazy hydration (hydrate-on-visible).

Why CSS isn't loaded:

When using defineAsyncComponent with hydrate: hydrateOnVisible(), the component's JavaScript bundle (including any CSS imports or <style> blocks) isn't loaded until the hydration trigger fires. If CSS is bundled with the component, it won't be available until then.

Solutions:

1. Extract critical CSS - Move styles that affect layout/height to a global stylesheet or the parent component:

<!-- parent or global CSS -->
<style>
.lazy-component-placeholder {
  min-height: 300px; /* or whatever the expected height is */
}
</style>

2. Use CSS-in-JS with SSR extraction - If using something like UnoCSS or Tailwind, the utility classes will be extracted at SSR time

3. Preload the CSS separately - Split your component's CSS into a separate file and load it eagerly:

// Load CSS immediately, hydrate component lazily
import './MyComponent.css'
const MyComponent = defineAsyncComponent({
  loader: () => import('./MyComponent.vue'),
  hydrate: hydrateOnVisible()
})

4. Use skeleton placeholders - Show a placeholder with correct dimensions until hydration:

<Suspense>
  <template #default><LazyComponent /></template>
  <template #fallback><Skeleton height="300px" /></template>
</Suspense>

For anchor scroll issues specifically:

You might also consider using scroll-margin-top CSS property on your anchor targets, or delaying the scroll until after hydration completes.

The fundamental tradeoff: lazy hydration saves bandwidth but defers CSS loading. Critical layout styles need to be available synchronously.