In Nuxt 4, is it possible to handle fallback during SSR like in Next.js?
It seems that the Vue Suspense component does not support SSR, so fallback rendering works only on the client side. In Nuxt 4, when using useFetch(), it waits for the response to complete before returning the fully rendered HTML… Is there any way to handle this differently?
5 Replies
Hi @frontzero. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In Nuxt 4, SSR rendering with data-fetching composables like useFetch() indeed waits for the data to resolve before sending the HTML to the client. This means that, unlike Next.js's fallback mechanism (where a fallback UI can be sent while data is still loading), Nuxt's SSR will not stream a fallback or skeleton UI during the initial server render. The Vue Suspense component does not support SSR fallback rendering—its fallback only appears on the client side after hydration, not during the initial SSR HTML output.
There is no documented or built-in way in Nuxt 4 to achieve a Next.js-style SSR fallback where the server sends a partial page with a loading state and then streams in the data when ready. The current behavior is that SSR waits for all async data (such as useFetch) to resolve before rendering the page HTML. The fallback slot of <Suspense> is only used on the client, after hydration, not during SSR.
If you need to show a loading state during client-side navigation, you can use Suspense or loading indicators, but for the initial SSR, Nuxt will always wait for data to resolve before sending HTML. There is no official support for SSR streaming fallback or partial hydration in the knowledge sources provided.
If you have a use case where you want to show a loading state before hydration completes, there are some enhancements around SPA loaders and configuration for client-only loading templates, but these are for SPA mode and not for SSR fallback streaming like in Next.js. For example, the SPA loader can be configured to show until hydration is complete, but this does not apply to SSR fallback for data fetching with useFetch() or Suspense during SSR output fix: allow showing spa loader til after hydration.
In summary:
- SSR in Nuxt 4 waits for all data to resolve before sending HTML. - Vue Suspense fallback does not render during SSR, only on the client. - There is no built-in SSR fallback/streaming mechanism like Next.js fallback in the knowledge sources. If you need more advanced SSR streaming or fallback, this is not currently supported out of the box in Nuxt 4 according to the available documentation and issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
- SSR in Nuxt 4 waits for all data to resolve before sending HTML. - Vue Suspense fallback does not render during SSR, only on the client. - There is no built-in SSR fallback/streaming mechanism like Next.js fallback in the knowledge sources. If you need more advanced SSR streaming or fallback, this is not currently supported out of the box in Nuxt 4 according to the available documentation and issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@991870506674430004> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Does Nuxt 4’s error.vue generate an entirely new HTML page?
@kapa.ai Does Nuxt 4’s error.vue generate an entirely new HTML page?
Let me check the knowledge base for you again. One moment! :books:
----------------------
When an error occurs during SSR in Nuxt 4, Nuxt creates a new SSR context and re-renders the error page, which results in generating an entirely new HTML page for error.vue. This means that any data stored in useState, event.context, or fetched in plugins/composables is lost, and the error page is rendered as a fresh SSR response, not as a partial update or overlay on the existing page SSR context is cleared during error handling, causing duplicate API requests for critical initial data.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@991870506674430004> Kapa.ai is still learning and improving, please let me know how I did by reacting below.