첫 번째 밀리초 동안의 콘텐츠 점프

첫 번째 밀리초 동안의 콘텐츠 점프

Nuxt를 사용하여 동적 페이지를 만들고 있습니다.페이지 폴더에는 _url.vue 파일이 1개 있습니다.다음 코드가 포함되어 있습니다.

<template lang="pug">
    div
        component(
            v-for="component in components"
            :key="`${component.type}-${component.id}`"
            :is="`the-${component.type}`"
        )
</template>
<script>
// import vuex
export default {
    computed: {
        ...mapGetters('app', {
            components: 'getComponents'
        })
    }
}
</script>

set Components는 미들웨어 수준에서 발생합니다.

export default async function ({ store }) {
    await store.dispatch('app/setPage')
}

페이지 로드의 첫 번째 밀리초 동안 구성요소가 즉시 렌더링될 때 컨텐츠가 "점프"됩니다.어떻게 하면 이 상황을 해결할 수 있을까요?

먼저 컴포넌트를 수동으로 Import하여 컴포넌트를 삽입하는 데 시간이 걸리는지, 레이아웃이 표시되는지 확인합니다.

그 후, 여기서 이것에 대해 논의했습니다만, 한번 봐 주세요.Vue: 모든 컴포넌트가 마운트될 때까지 렌더링을 기다립니다.

이런 종류의 마이크로 점핑을 다루는 방법에는 여러 가지가 있습니다.독자적인 솔루션을 선택할 수 있습니다.또한 앱을 유니버설 또는 SPA로만 사용하는지 여부에 따라 달라집니다.

처럼 보인다require방법이긴 하지만 다른 방법도 있습니다.

언급URL : https://stackoverflow.com/questions/67824849/content-jump-in-the-first-milliseconds