Nuxt 3 ssr при обновлении страницы показывает два компонента?

Question

[Maksim Drazdou]

ssr: true в nuxt.config.ts

Всем привет, написал простой useResponsive

export default function useResponsive() {
  const isMobile = ref(false);
  const isTabled = ref(false);
  const isDesktop = ref(false);

  onMounted(() => {
    updateWidth();
    window.addEventListener('resize', updateWidth);
  });

  const updateWidth = () => {
    isMobile.value = window.innerWidth <= 640;

    isTabled.value = window.innerWidth > 640 && window.innerWidth <= 1280;

    isDesktop.value = window.innerWidth > 1280;
  };

  return {
    isMobile,
    isTabled,
    isDesktop
  };
}

на странице вызываю вот так

<div class="tw-py-0 tw-mb-6 xl:tw-py-7 xl:tw-mb-0">
        <LazyMediaMobilePageGallery v-if="isMobile"/>
        <LazyMediaPageGallery v-else/>
      </div>

<script lang="ts" setup>
  import useResponsive from '~/composables/useResponsive';

  const { isMobile, isTabled, isDesktop } = useResponsive();
</script>

при обновлении страницы (в мобильном режиме) идет скачек компонентов, сперва выходит компонент из isDesktop а потом он прячется и показывается компонент isMobile

Answer 1

[Антон Антон]

Заверни в <ClientOnly>

Comments

[Maksim Drazdou]

вроде ок, теперь при обновлении компонент пропадает и появляется

[Антон Антон]

BarabanObivan, ну или в куки писать последний определившийся размер, чтобы на сервере правильно определять

[Антон Антон]

BarabanObivan, еще можно плейсхолдер подставить (слот fallback у ClientOnly), который будет показываться до рендера компонента на клиенте