Server Component Fallback not showing when lazy=true (On refresh) about nuxt HOT 12 CLOSED

there's indeed a bug in your reproduction, NuxtIsland isn't able to mount properly with a <CLientOnly> and a #fallback

from nuxt.

I got same problem with latest version 3.10.0.

from nuxt.

hmmm can you provide a minimal reproduction so i can check what's going on ?

from nuxt.

However if you really want to not block the ssr, you can wrap the server component with a <ClientOnly>

Important to note: Then the content is also not in the initial HTML ☺️

from nuxt.

However if you really want to not block the ssr, you can wrap the server component with a <ClientOnly>

Important to note: Then the content is also not in the initial HTML ☺️

I'm guessing this isn't really what I want then? I would need to wait until streaming support is available for Server Components? Surprised this hasn't already been added yet :P This is something that's pretty crucial over in the Next.js land atleast.

from nuxt.

I would need to wait until streaming support is available for Server Components?

I think so, yes.

from nuxt.

AFAIK there is no "streaming and replacing" supported at the time of writing, meaning all data (including the data from server components) need to be present to finish the initial request and to return the HTML.

cc @huang-julien

from nuxt.

AFAIK there is no "streaming and replacing" supported at the time of writing, meaning all data (including the data from server components) need to be present to finish the initial request and to return the HTML.

cc @huang-julien

I'm confused as to what the goal of the lazy prop and fallback slot is then? If the request blocks until data is loaded from the server component.. where does the lazy and fallback functionality come in to play? Also why does it work fine when i'm on another page, and redirect to the page (as shown in the video)?

from nuxt.

Hi 👋

@manniL is right. the lazy prop act like useLazyAsyncData and useLazyFetch so it only works client side. However if you really want to not block the ssr, you can wrap the server component with a <ClientOnly>

from nuxt.

Hi 👋

@manniL is right. the lazy prop act like useLazyAsyncData and useLazyFetch so it only works client side. However if you really want to not block the ssr, you can wrap the server component with a <ClientOnly>

@huang-julien as in:

<ClientOnly>
  <TodoList :lazy="true">
    <template #fallback>Loading...</template>
  </TodoList>
</ClientOnly>

or...

<script setup lang="ts">
const { $client } = useNuxtApp()
const { data: todos } = $client.getTodos.useQuery()
</script>

<template>
  <ClientOnly>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.name }}
    </li>
  </ClientOnly>
</template>

The first option seems to do what I want.. but it just stays "Loading..." and no data is actually loaded in the component... doesn't seem to render the component.

from nuxt.

Would you be able to provide a reproduction? 🙏

from nuxt.

hmmm can you provide a minimal reproduction so i can check what's going on ?

Here's a reproduction https://stackblitz.com/edit/github-cuqpvj?file=pages%2Findex.vue

I am new to Nuxt so if i'm just not doing something correctly, I apologize.

from nuxt.