[Next.js] 페이지 이동시 로딩 처리하기

Next JS는 SSR 프레임워크이긴 하지만 Link 컴포넌트나 Router를 통한 Client Side Navigation (페이지 전환이 JS를 통해 이루어짐)이 가능하기 때문에 페이지 이동시 CSR 앱만큼이나 좋은 UX경험을 전달할 수 있습니다. 이번 포스트에서는 Next JS에서 라우터를 통한 페이지 이동을 할 때 좋은 사용자 경험을 위해 적용할 수 있는 로딩 처리 방법에 대해 알아보겠습니다. Router 이벤트 위에서 보이는바와 같이 로딩 처리를 하고 안하고의 차이는 웹앱을 사용하는 사용자 입장에선 매우 큽니다. 가벼운 페이지나 SSG를 방식을 통해 생성된 페이지는 괜찮을 수도 있지만 서버사이드 랜더링을 해야 하는 페이지에서 좀 무거운 작업을 하게 된다면 로딩 상태를 알릴 수 있는 Spinner..

2022.04.19