The async component cannot SSR in a named slot

[klwfwdk]

Version

v2.11.0

Reproduction link

https://github.com/klwfwdk/nuxt_async_issue

Steps to reproduce

1.clone the repositories
2.yarn install and start it by yarn dev or nom run dev
3.curl http://localhost:3000

What is expected ?

the component import through "() => import('......')" can be SSR

What is actually happening?

This component does not appear in the results returned by SSR.
This component is rendered in the browser by javascript

Additional comments?

in the reproduction , I imported three identical components except for the text through different ways. The last two components are import as async components.
the container components has 3 slots, the first two are named slots , the last one is default sold.
when I put three components into 3 sorts. the async component with default slots and the sync component with named slots are rendered and returned by the server. But the async with named slot does not appear in the result of the server rendering.
In production mode(build and start),the first return is same as dev mode. but the fallowing return include the async component with named slot.

I explored further. I used vue-cli to build an ssr project without NUXT. Obviously it did not have the above issue, https://github.com/klwfwdk/ssr_asnync_vuecli

it means this issue is caused by Nuxt , not caused by vue-server-renderer.

[TheAlexLichter]

A similar issue like #6423.

[atinux]

Actually I tried your vue-cli example @klwfwdk and it does not do SSR.

[atinux]

Actually it seems that it's an issue with vue-server-renderer: vuejs/vue#10391

[klwfwdk]

@atinux It seems you got the project's startup script wrong.

1. npm run build:win /build:mac (depends on your device)
2. npm run start
   
   it really can SSR

[jualoppaz]

Hi @atinux !

I am experiencing the same error than @klwfwdk although I am not using async components. In my case I have several component use cases like this:

<MediaList
   :items="extraTraining"
   >
   <template v-slot:image="{ item: training }">
      <a
         :href="`/docs/${training.certification}`"
         target="_blank"
         >
      <img
         :src="`/images/${training.image}`"
         >
      </a>
   </template>
   <template v-slot:title="{ item: training }">
      <span class="extra-training-date">{{ getExtraTrainingDate(training) }}</span>
   </template>
   <template v-slot:body="{ item: training }">
      {{ training.description }}
   </template>
</MediaList>

And I get the same result with SSR: the nested components are not server side rendered. This issue can be checked in http://www.juanmanuellopezpazos.es/curriculum . If you access to this page after navigating from another page section (client side render) you can see the page well loaded.

Is this issue also related to vuejs/vue#10391 ? Is there any workaround until this issue is fixed?

Thank you sou much.

[danielroe]

We are approaching the Nuxt 2 EOL date (June 30, 2024) - see this article for more information. This is advance warning that I'm going to close this issue then, as it's currently marked as a Nuxt 2 related bug.

If it's a critical or security issue, please do comment and let me know, in case it is possible to address it before the EOL date.

If it's a an issue you think is relevant for Nuxt 3, please feel free to open a fresh issue (or just comment here so I can update labels, etc.). 🙏

Thank you for your understanding and for your contribution to Nuxt. ❤️

[danielroe]

It's the day, at last. Nuxt 2 is now marked end-of-life.

My apologies we never got round to resolving this bug in the 2.x branch, but we do have to draw a line somewhere. Again, if you think this is still relevant for Nuxt going forward, please feel free to open a fresh issue (or just comment here so I can update labels, etc.). 🙏