Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): fetch non-server rendered islands when hydrating (#25613)

Browse Source
This commit is contained in:
Julien Huang 2024-02-05 11:36:20 +01:00 committed by GitHub
parent 8705aed8b4
commit 7dd0225007
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/nuxt/src/app/components/nuxt-island.ts
View File

@ -224,9 +224,9 @@ export default defineComponent({
watch(props, debounce(() => fetchComponent(), 100), { deep: true })
}
if (import.meta.client && !nuxtApp.isHydrating && props.lazy) {
if (import.meta.client && !instance.vnode.el && props.lazy) {
fetchComponent()
} else if (import.meta.server || !nuxtApp.isHydrating || !nuxtApp.payload.serverRendered) {
} else if (import.meta.server || !instance.vnode.el || !nuxtApp.payload.serverRendered) {
await fetchComponent()
} else if (selectiveClient && canLoadClientComponent.value) {
await loadComponents(props.source, payloads.components)

3
test/basic.test.ts
View File

@ -1530,6 +1530,9 @@ describe('server components/islands', () => {
await page.locator('#show-island').click()
expect(await page.locator('#island-mounted-client-side').innerHTML()).toContain('Interactive testing slot post SSR')
// test islands wrapped with client-only
expect(await page.locator('#wrapped-client-only').innerHTML()).toContain('Was router enabled')
if (!isWebpack) {
// test client component interactivity
expect(await page.locator('.interactive-component-wrapper').innerHTML()).toContain('Sugar Counter 12')

4
test/fixtures/basic/pages/islands.vue vendored
View File

@ -20,10 +20,14 @@ const count = ref(0)
name="PureComponent"
:props="islandProps"
/>
<div id="wrapped-client-only">
<ClientOnly>
<NuxtIsland
name="PureComponent"
:props="islandProps"
/>
</ClientOnly>
</div>
</div>
<button
id="increase-pure-component"