Using Layouts to avoid page re-renders on searchParam changes? Is this a bad idea?
Unanswered
Silver posted this in #help-forum
SilverOP
Hi, I'm moving a page in our application over from pages dir to app dir. It is a typical "search as I move the map" type page, similar to the old airbnb layout, with a map on one side of the page and listings on the other which update when you interact with the google map. In the pages version, we did this by updating the search params in the url which triggered a shallow reload which then updated the listings. It worked quite well. In the app directory however, shallow reloads aren't available which causes a lot of flickering since the map now needs to reload and rerender.
I have moved some things around and found that by putting the map in the layout.ts file it no longer re-renders on update since that is the behaviour of a layout. My question is this a good idea? Is this what layouts are for or will I run into unexpected issues in future? Is this a hack? Thanks in advance
I have moved some things around and found that by putting the map in the layout.ts file it no longer re-renders on update since that is the behaviour of a layout. My question is this a good idea? Is this what layouts are for or will I run into unexpected issues in future? Is this a hack? Thanks in advance
2 Replies
@Silver Hi, I'm moving a page in our application over from pages dir to app dir. It is a typical "search as I move the map" type page, similar to the old airbnb layout, with a map on one side of the page and listings on the other which update when you interact with the google map. In the pages version, we did this by updating the search params in the url which triggered a shallow reload which then updated the listings. It worked quite well. In the app directory however, shallow reloads aren't available which causes a lot of flickering since the map now needs to reload and rerender.
I have moved some things around and found that by putting the map in the layout.ts file it no longer re-renders on update since that is the behaviour of a layout. My question is this a good idea? Is this what layouts are for or will I run into unexpected issues in future? Is this a hack? Thanks in advance
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api
^ Nextjs app router has official support for shallow routing
^ Nextjs app router has official support for shallow routing
SilverOP
oh that's good to know! Thank you I will have a look now