router.push in child client component is blocked by API request in parent "Home" server component
Unanswered
Chinese perch posted this in #help-forum
Chinese perchOP
I have a Home server component which has 2 components.
1) A "FooSort" client component with a dropdown that "onChange" does a "router.push" to update the query string param with a "sort=xxx" value.
2) A "FooList" component that simply receives a promise from the parent server component "Home" and unwraps it (either using "use" if client or "await" if server component - doesn't make a difference at this point). It simply maps through the result and renders a simple list of "foos".
If I delay the api endpoint eg. 5 seconds why does it take 5 seconds for the router.push to change the query string param in the url? Why does it have to wait for the api endpoint request that is made in the parent "Home" server component?
How can I get around this, so the router.push happens immediately, before the api request in the parent component completes?
1) A "FooSort" client component with a dropdown that "onChange" does a "router.push" to update the query string param with a "sort=xxx" value.
2) A "FooList" component that simply receives a promise from the parent server component "Home" and unwraps it (either using "use" if client or "await" if server component - doesn't make a difference at this point). It simply maps through the result and renders a simple list of "foos".
If I delay the api endpoint eg. 5 seconds why does it take 5 seconds for the router.push to change the query string param in the url? Why does it have to wait for the api endpoint request that is made in the parent "Home" server component?
How can I get around this, so the router.push happens immediately, before the api request in the parent component completes?
8 Replies
Chinese perchOP
Just to clarify, I know that with next.js 13 and app router we can't do shallow routing to update the query string params without refetching data from the parent server component
But it should be possible to at least get the query string params / url to change BEFORE the refecthing of data occurs
that is my problem. That the router.push is delayed until the data request has finished in the parent server component, which doesn't mmake sense to me 😄
Chinese perchOP
Yes, it's the same problem on prod
Chinese perchOP
@aardani I've made a running example here: https://j79lcg-3000.csb.app/ and the code is here: https://codesandbox.io/p/sandbox/j79lcg