When developing dynamic web pages with Nuxt, I encountered an issue in the pages directory where a file named _url.vue is located. The contents of this file are as follows:
<template lang="pug">
div
component(
v-for="component in components"
:key="`${component.type}-${component.id}`"
:is="`the-${component.type}`"
)
</template>
<script>
// implemented vuex
export default {
computed: {
...mapGetters('app', {
components: 'getComponents'
})
}
}
</script>
The function setComponents is executed at the middleware level:
export default async function ({ store }) {
await store.dispatch('app/setPage')
}
During the initial milliseconds of page loading, there is a noticeable content "jump" caused by the dynamic rendering of components. How can this issue be rectified?