fix(nuxt3): fix layout suspense loading

[danielroe]

🔗 Linked issue

resolves nuxt/nuxt#13168, resolves nuxt/nuxt#13369

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This resolves two significant layout-related bugs. By setting suspensible to false, layout children weren't blocking rendering of the app, which meant that isHydrating was false by the time these functions ran.

There is still an upstream bug related to nested suspenses on route changes, but it has a different cause.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[netlify]

✔️ Deploy Preview for nuxt3-docs canceled.

🔨 Explore the source changes: 4a42cdd

🔍 Inspect the deploy log: https://app.netlify.com/sites/nuxt3-docs/deploys/62307546c24306000842b790

[atinux]

Thank you @danielroe

[tiborpino]

After Nuxt 3.0.0-27335375.b41a1d2 upgrade double calling is fixed, but there is another error.
Data fetch with useLazyFetch are available on the server side but not on the client side. Data on the client side are always null. Watch doesn't help, it never runs.

const { data: cart } = await useLazyFetch<any>('/api/cart', {
    headers: useRequestHeaders(['cookie']),
})
if (process.server) {
    console.log('server: ', cart.value) // data available
}
if (process.client) {
    console.log('client: ', cart.value) // data null
}
watch(cart.value, (updatedCart) => {
    console.log('watch: ', updatedCart) // never runs
})

without await

const { data: cart } = useLazyFetch<any>('/api/cart', {
    headers: useRequestHeaders(['cookie']),
})
if (process.server) {
    console.log('server: ', cart.value) // data null
}
if (process.client) {
    console.log('client: ', cart.value) // data null
}
watch(cart.value, (updatedCart) => {
    console.log('watch: ', updatedCart) // never runs
})

[danielroe]

@tiborpino The syntax is

watch(() => cart.value, (updatedCart) => {
    console.log('watch: ', updatedCart)
})

The issue about data not being preset on client-side looks like a separate issue - let's track on nuxt/nuxt#13560.

[tiborpino]

Now I'm using useLazyAsyncData as replacent for useLazyFetch because of the bug nuxt/nuxt#13560 and watch still doesn't work

const cart = useLazyAsyncData('cart', () =>
    $fetch('/api/cart', {
        headers: useRequestHeaders(['cookie']),
    })
)
watch(
    () => cart.data.value,
    (updatedCart) => {
        console.log('watch: ', updatedCart) // never runs
    }
)

[danielroe]

Let's track in that issue (or another, if you think it's a new one). This is a merged PR that is unrelated.