SSR renders template after useQuery is resolved

[ashotmark]

Your use case

I have several hierarchy component structure for example:

<ComponentDeep1>
   <ComponentDeep2>
   <ComponentDeep2>
</ComponentDeep1> 

In server side rendering. ComponentDeep1 has useQuery(query1) call and same on ComponentDeep2. ComponentDeep1 supports null state during loading, so ComponentDeep2 can be rendered concurrently inside instead of waiting useQuery is finished. the problem here, ComponentDeep1 does not render ComponentDeep2 until useQuery(query1) is finished. and after query1 is finished, it renders ComponentDeep2 and useQuery(query2) is started. so total duration equals duration(query1) + duration(query2). and if we have more deep components, it significantly increases duration of initial loading.

This issue happens at only server side rendering. In the browser, useQuery does not block template rendering and it updates html for both cases of loading state and content with data. and all useQuery apis triggers in parallel. so total duration is calculated as max(duration(query1), duration(query2)) which is great!

The solution you'd like

Even on server side rendering, nuxt can render html template during useQuery is in loading state, and update html once data is resolved. so that this will not block api starting timing on children components. so that all useQuery apis runs in parallel. and total duration becomes as max(duration(query1), duration(query2)).

Possible alternatives

As a alternative way, we will have all query in single root component, preserve state into children by using provide('api', {data1, data2}). and inject corresponding data in child. but this require additional maintenance and ban to single component responsibility of SOLID principle.

Additional information

No response

[raphaelcangucu]

Hey, I need that for my project too.

[codeninja115]

I need to get this issue resolved too. Hope we can get it resolved asap.