I notice that in NextJs, whenever I click on a
<Link> to go to another page, it calls the
getInitialProps even if that "another" page is the same page.
For instance, on
/profile page, there are 2 components, one for "user information" and the other component for "list of orders" which is paginated. Both data used in "user information" and "list of orders" components are fetched from APIs in
getInitialProps of the
When I click to go to the next page of the "list of orders" component on
/profile page, it goes to
/profile/p/2. The data loads and it all works fine, except that
/profile/p/2 actually reloads the whole profile page and re-fetches the "user information" data which should have remained the same (and doesn't need to be re-fetched) as long as the page is part of
Is there a way to navigate to
/profile without reloading the whole page but only the component showing the list of orders?
You can pass shallow to Link like this
<Link href="...." as="...." shallow=true />
©2020 All rights reserved.