nuxt-booster
nuxt-booster copied to clipboard
basics
Inconsistent behavior between dev and prod server mode
Nuxt version: 2.15.7
Node version: v16.13.0
No problem using yarn dev.
Using yarn build && yarn start gives unexpected results for imported components using speedkitHydrate.
They fetch method in those components are trigerred in loop on some of them, and don't know why.
In a first time I tought it was on property change or something like that (although usually changing a property does not retrigger fetch), but even after checking properties are not changed using a "watch" on them, I still observe the unexpected fetch loop (querying in my case an API).
Before digging more, what is supposed to trigger fetch loop in components?
Hello @frossigneux,
the fetch loop is very strange.
Basically there is no difference between dev and server mode in the initialization of the components server-side.
https://github.com/GrabarzUndPartner/nuxt-speedkit/blob/77155cda44d41035f8ab297d02e3ac1ec4906882/lib/hydrate.js#L9-L23
In both cases, the component is passed directly in server mode. Client side the component is initialized with vue-lazy-hydration.
Does it happen in server the loop or in client?
Can you reproduce this in an empty project with a very simple example?
Ok, here is a minimal example to reproduce inconsistent behavior.
Component Child.vue:
<template>
<v-card flat>Child</v-card>
</template>
<script>
export default {
fetch() {
this.$emit('loading', true)
console.log('FETCH CHILD')
this.$emit('loading', false)
},
}
</script>
Page page.vue:
<template>
<v-container>
Parent: {{ loading }}
<child
@loading="
(value) => {
loading = value
}
"
/>
</v-container>
</template>
<script>
import speedkitHydrate from 'nuxt-speedkit/hydrate'
export default {
components: {
Child: speedkitHydrate(() => import('@/components/Child')),
},
data() {
return {
loading: false,
}
},
}
</script>
Browser rendering output using yarn dev: no fetch loop.
Browser rendering output using yarn build && yarn start: fetch loop!
Browser rendering output using regular import instead of speedkitHydrate and dev or prod server mode: no fetch loop.
So there is a problem with speedkitHydrate and prod mode. I always tested by navigating to the test page indirectly.
However, if we replace in parent:
Parent: {{ loading }}
by
Parent
there is no more infinite loop.
Other thing: if I emit only one event, there is no more infinite fetch loop neither!
The bug is related to the rendering of parents in the case of multiple events.
@ThornWalli Thanks for your help!
@frossigneux Could understand it and probably also solve. But now I have to think about the change again. In principle, nothing speaks against it.
@frossigneux Have now a beta release, so you can test it.
https://www.npmjs.com/package/nuxt-speedkit/v/2.0.21-beta.1