[NextJs] 페이지 전환 모션 적용시 스타일 제거되는 문제 및 해결 방법 정리

- next 동작 형식 ssg, isr 방식으로 프리랜더되서 만들어지는 페이지는 프리렌더링 방식으로 구현되어 있는 페이지들은 이벤트가 발생하지 않더라도 라우터 설정되어 있는 메뉴에 호버하면 해당 데이터를 확인할걸로 예측해서 미리 prefetching 처리

- 해당 페이지 컴포넌트가 route명이 변경되서 unmount될때마다 이다음에 prefetch할 데이터 용량을 최소화하기 위해서 style노드를 제거

- Framer-motion AnimatePresence를 이용해서 모션이 끝날때까지 이전 컴포넌트의 언마운트 시점을 강제로 holding하고 있으면 이미 스타일 제거된 지저분한 페이지가 화면에 계속 출력이 되는 문제 발생

- 정적인 스타일은 상관없지만 자바스크립트 동적으로 제어하는 moudle.scss. style-component, tailwidnCSS에는 모두 위와 같은 문제 발생

＠해결방법
- 라우터가 변경되는 시점마다, unmount되서 스타일이 날아가기 직전에 해당 스타일 노드를 head에서부터 복사한 다음에 next 고유 속성명 제거
- 복사한 style node를 다시 강제로 head에 삽입
- 이렇게 복사가 된 style 노드는 next가 제거할 수 없으므로 router가 변경되더라도 복사된 style이 유지되므로 스타일도 유지
- transition이 끝나서 이전 페이지 컴포넌트가 언마운트 되는 시점에 강제 복사했던 스타일 노드를 다시 제거
- 해당 기능을 함수로 만들어서 루트 컴포넌트에서 라우트가 변경 될때마다 호출