next.js에서 per-page layout이 가능한 이유?

안녕하세요! 보고 계신 공식 문서에 기술적으로 가능한 이유가 나오는 것 같습니다. "This layout pattern enables state persistence because the React component tree is maintained between page transitions. With the component tree, React can understand which elements have changed to preserve state." Next.js를 사용하더라도 client-side navigation을 사용하면 SPA로 만들 수 있습니다. (Next.js의 Link 컴포넌트를 사용한 페이지 이동이 client-side navigation의 예시) 이후는 React의 컴포넌트 트리가 페이지 이동 간 유지되는 기능을 활용하는 것 같습니다. next 문서의 예시를 따르면, MyApp의 컴포넌트 트리는 <Layout> <NestedLayout> // 페이지 레벨 레이아웃 <PageComponent /> </NestedLayout> </Layout> 이런 형태가 될 것 입니다. 여기서 만일 PageComponent를 Page2Component로 바꾼다고 가정해봅시다. 그리고 PageComponent와 Page2Component가 동일한 Layout과 NestedLayout을 사용한다면, 리액트는 두 컴포넌트를 유지한채로 PageComponent만 Page2Component로 바꿀 것 입니다. 이렇게되면 Layout과 NestedLayout은 상태를 유지한채로 (브라우저에) 동일하게 보여질 것입니다. 말씀하신 per-page layout은 persistent layout patterns in Next.js라는 블로그에 더 자세히 나와있는 것 같으니 참고하시면 좋을 것 같습니다 :) https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/