Next.js에서 페이지 전환시 요소를 변경하는 방법은 무엇일까요?

[JungHun98]

<a>태그를 사용하여 어떤 페이지를 방문 했을 때 웹 페이지는 화면에 표시할 모든 요소를 다운로드 받습니다. 그리고 이미 방문한 페이지를 또 방문하더라도 웹 페이지는 리소스 다운로드를 진행하게 되는데요.

이 문제를 극복할려면 Link 컴포넌트를 사용하면 됩니다. Link 컴포넌트로 구현된 요소에 마우스 포인터를 올려놓으면 아직 클릭 하지 않았음에도 불구하고 브라우저 백그라운드에서 미리 페이지를 다운로드 받습니다.

거기에 더해, 이미 방문한 페이지를 또 방문 하더라도 다시 다운로드를 하지 않습니다. 이러한 장점들이 있기 때문에 Next.js 에서는 페이지 이동을 할 때 Link 컴포넌트를 사용하는 것이 좋습니다.

여기서 궁금한 점은 이동한 페이지에 필요한 자바스크립트 파일만을 다운로드했을 뿐인데 화면의 DOM요소 변경이 일어난다는 점입니다. 이는 제가 평소 접하던 CSR 방식과 비슷하다고 느껴집니다.

Next에서 Link를 활용한 페이지 전환이 일어났을 때 페이지의 DOM 요소가 어떤식으로 변경되는 걸까요??