Next.Js의 next/link, middleware 질문합니다!

1. next/link prefetch next/link의 prefetch 기능은 production 환경과 Link태그로 감싼 컴포넌트가 브라우저 뷰포트에 있을 때 실행됩니다. 테스트는 배포된 사이트에서 네트워크 탭을 살펴보거나 빌드 환경에서 테스트 해볼 수 있습니다. 개발환경에서 테스트하려면 다음과 같은 명령어를 통해 production환경에서 테스트할 수 있겠네요 - 프로젝트 빌드 // npm run build or yarn build - 프로젝트 실행 // npm start or yarn start 단, prefetch는 정적 자원(css, js)만 미리 받아오기 때문에 SSR로 구현한 페이지의 getServerSideProps 함수는 미리 수행하지 않습니다. ssr, ssg, isr방식을 통해 받아오는 데이터의 prefetch를 기대하셨으면 ssg와 isr의 데이터만 prefetch될거에요. (app router기준 revalidate 속성값을 통해 캐싱 주기를 설정한 경우) 2. middleware 저는 로그인을 했을 때 접근이 가능한 페이지를 로그인하지 않은 유저가 접근했을 때 메인 페이지 혹은 로그인 페이지로 redirect 할때 주로 사용했습니다. 예를들어 29CM(https://www.29cm.co.kr/home) 홈페이지에서 로그인하지 않은 상태에서 "MY PAGE" 버튼을 클릭하면 "/mypage" 페이지로 이동한 후 "/login" 페이지로 리다이렉션되는 것을 확인할 수 있습니다. (개발자 모드에서 네트워크를 Slow 3G 모드로 설정하면 테스트하기 편합니다) "/mypage" 페이지로 이동할 때 "/mypage" 페이지 화면이 렌더링된 후에 서버로 통신을 보내면서 401에러를 받거나 로그인 되지 않은 사용자임을 인식하고 로그인 페이지로 리다이렉션됩니다. (제 추측이라 정확하지는 않습니다) 이러한 상황에서는 사용자가 "/mypage"를 렌더링하는 데 불필요한 시간이 소요될 수 있고, "mypage"가 일시적으로 표시된 후 로그인 페이지로 이동하면서 깜빡이는 현상이 발생하여 사용자 경험에 부정적인 영향을 줄 수 있습니다. 만약 middleware를 "/mypage" 페이지에 적용한다면 페이지를 렌더링하기 전에 서버 측에서 유효한 유저인지 미리 확인한 후에 페이지를 이동시켜서 로그인하지 않은 유저가 방문했을 때 깜빡거리는 현상과 불필요한 렌더링이 발생하지 않을 수 있다는 장점이 있을 수 있을 것 같습니다 단, middleware를 사용하는 것은 서버 비용이 부과되고 로그인이 완료된 유저가 페이지를 방문해도 계속 실행되기 때문에 상황에 맞게 적절하게 도입하면 좋을 것 같습니다. middleware 요금 정보: https://vercel.com/docs/functions/edge-middleware/usage-and-pricing