in the first approach (with getLayout) the layout components won't be remounted when changing pages due to reconciliation. if you add the layouts in the page component itself they will be remounted and it could be problematic if you want to maintain state in these layout components since it would be reset

fyi this approach for layouts is only necessary in the pages directory, in the new app directory there is a better built-in support for layouts: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

Sweet. Thank you @Rafael Almeida

Will data that is fetched persist in layout components?

So currently on each nested page say we go with option one, it has to refetch data for each

But with the reconciliation does it persist data and state? So if I fetch with useSWR or react-query, will that data not be 'refetched' on a nested route?

I'm actually working backwards on this. The app directory was really smooth to set up for this I want to demo moving from pages to app directory and I just want to make sure I understand getLayout correctly

data-fetching libraries are a bit different because by default they cache most queries result in the provider which is usually rendered in the custom app. so even if these layouts are remounted (by not using getLayout), it doesn't necessarily means that the queries will be refetched because they could be in the cache already

to be clear, any state created in these layout components itself will get reseted on navigation

using react-query as an example with the default config:
1. by default, cached queries are considered stale. so if you mount a component with a cached request it will still be refetched
2. so you go to a page not using getLayout, it will fetch the data with react-query and add it to the cache (stored in the provider in App)
3. you navigate to another page, the layout component will unmount and mount again. react-query will see the data is on cache but it is stale, so it will fetch it again

ok, so because the getLayout reconciles the layouts then essentially the data fetching (react query fn) wont be 'remounted' either thus it wont rerun?