SSR - Hydration text mismatch

[imcm7]

On server it not read color because color is stored in local storage and not cookie

[RamaHerbin]

I've got the same issue here

[Kolobok12309]

You can try use ClientOnly for components that use theme variable like this

<div class="color-theme-switcher">
  <ClientOnly>
    <SfIcon
      :icon="iconName"
      class="color-theme-switcher__icon"
    />

    <span class="color-theme-switcher__text">
      Theme
    </span>

    <SfToggleSwitch
      v-model="isDark"
      class="color-theme-switcher__toggler"
    />

    <template #placeholder>
      <div class="color-theme-switcher__placeholder" />
    </template>
  </ClientOnly>
</div>

[TsotMe]

@Kolobok12309 Then on page refresh that content inside ClientOnly will disappear until client render

You can try use ClientOnly for components that use theme variable like this

<div class="color-theme-switcher">
  <ClientOnly>
    <SfIcon
      :icon="iconName"
      class="color-theme-switcher__icon"
    />

    <span class="color-theme-switcher__text">
      Theme
    </span>

    <SfToggleSwitch
      v-model="isDark"
      class="color-theme-switcher__toggler"
    />

    <template #placeholder>
      <div class="color-theme-switcher__placeholder" />
    </template>
  </ClientOnly>
</div>

[Kolobok12309]

@TsotMe Most powerful way is to use cookie and http header for ssr, and if both of them missing, use ClientOnly. Fulfillment without ClientOnly you can try use css( but I don't like css for this cases), or you get flashes between render and mount

[sharifzadesina]

It seems cookie storage is merged but this issue is not fixed. The interesting thing is, when I use <img :src="/img/logo-${colorMode.value}.svg">, src attribute doesn't update after mount. Because colorMode.value only changes to real value after mount but the attribute doesn't get updated. I get a lot of mismatch errors.