-
Notifications
You must be signed in to change notification settings - Fork 195
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SSR renders template after useQuery is resolved #592
Labels
Comments
Hey, I need that for my project too. |
I need to get this issue resolved too. Hope we can get it resolved asap. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Your use case
I have several hierarchy component structure
for example:
In server side rendering.
ComponentDeep1
hasuseQuery(query1)
call and same onComponentDeep2
.ComponentDeep1
supportsnull
state during loading, soComponentDeep2
can be rendered concurrently inside instead of waitinguseQuery
is finished.the problem here,
ComponentDeep1
does not renderComponentDeep2
untiluseQuery(query1)
is finished.and after
query1
is finished, it rendersComponentDeep2
anduseQuery(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 alluseQuery
apis triggers in parallel. so total duration is calculated asmax(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 asmax(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 tosingle component responsibility
ofSOLID
principle.Additional information
No response
The text was updated successfully, but these errors were encountered: