나만 모르는 Next14에 대해서_1

version: next 14.1.0

 

React로 구현했던 페이지를 Next14로 migration하면서 뭔가 너무 느려졌다.

 

버튼을 클릭하면 버튼에 해당하는 카드 리스트들이 나오는 형식인데
버튼을 클릭하면 url의 query부분이 변경되면서 카드 리스트들이 업데이트 되는 방식이다.
next의 동적라우팅을 사용하면서 버튼 클릭으로 url이 변경될때마다 페이지가 다시 로드되서 카드리스트를 업데이트 하는 동작이 이전에 React로만 페이지를 구현했을때보다 느려진거 같았다.

될지 안될지는 모르겠지만 하나씩 개선할 수 있는 부분을 찾아보자.

 

일단 코드상으로 버튼이 클릭됬을때 next/link의 Link를 사용해서 page를 이동시키고 있는데 혹시 이 부분이 페이지를 다시 로드하고 있을까 의문이 들었다. next의 라우팅에 대해서 찾아보니 Link와 next/navigation의 useRouter훅을 사용해서 url을 변경할 수 있었다.
둘의 차이점을 찾아도보고 실제로 네트워크 탭에서 확인해보니 클릭했을때 페이지가 동작하는 성능은 크게 차이가 없었다. 단 SEO관점에서 router.push는 a태그를 포함하지 않기때문에 Link를 사용하는 것이 더 좋다고 한다.

Link를 자세히 보니 production모드에서 prefetch를 수행한다는 장점이 있다고한다 (카더라)

하지만 동적라우팅에서는 동작하지 않고, 코드스플리팅이 의미가 없어진다고 한다.
(빌드나 페이지로드 시 무슨일이 일어난다는 건데 이건 다음에 알아보자)

 

 

다음으로 네트워크탭에서 데이터의 요청 및 응답을 자세히 살펴보자.

 

개발자 모드의 네트워크탭에서 보니 평균적으로 콘텐츠 다운로드 되는 시간(fetch)이 가장 오래 걸렸고 300ms 정도라 이 부분만 빠르게 할 수 있으면 될거 같다.

 

버튼들을 빠르게 번갈아가며 클릭했더니 카드리스트 업데이트가 이를 따라오지 못했다. 테스트를 계속하다보니 간혹 바로 카드리스트를 보여주는 경우가 있었다.

두 요청을 비교해보니 다른 부분이 하나 있었다.

fetch가 빠른 요청

fetch가 느린 요청

하지만 언제 fetch가 빨리되고 언제 느리게 되는지는 파악하지 못하고 있었는데, production 모드에서 prefetch 어쩌고 하던 내용이 생각나서 vercel에 배포후 확인해보니 뭔가 보이기 시작했다.

development에서 보였던 헤더의 Next-Router-Prefetch속성은 개발자 탭에서 확인하기 어려웠지만

버튼 클릭 시 Link로 dynamic routing이 일어난다. 처음에는 200ms정도였다가 초단위로 응답시간이 늘어났다.

 

결론

정적 라우팅의 prefetch는 페이지가 로드되었을때 동작한다고 Next공식문서에 명시되어있다.

동적 라우팅에서도 특정조건에서 prefetch와 비슷한 동작이 일어나는 것을 확인할 수 있었다.

 

그런데 더 자세히 보니 Link에 hover했을때 해당 버튼에 달린 Link의 url에 fetch 요청이 되고(200ms) 이내 요청이 완료(1~2초)됬다. 완료된 이후 버튼클릭을 하니 카드리스트가 바로 업데이트 됬다. 이미지가 있는 데이터는 좀 더 시간이 걸리는것 같았다. 이게 Link(next/link)에서 말하는 prefetch인거같다.

동적 라우팅에서도 특정조건에서 prefetch와 비슷한 동작이 일어나는 것을 확인할 수 있었다.

동적라우팅은 prefetch가 일어나지 않는다는 내용을 본 거 같은데 next에서 말하는 prefetch는 아니지만 hover(정확히 hover인지는 모르겠음)되는 순간. 즉, 앞으로 link에 연결된 페이지의 데이터들이 필요할거 같은 시점에 데이터를 가져오는 동작을 하는 것을 확인할 수 있었다.