Link

코딩/Next.js

[Next.js] a태그와 Link 태그의 차이점이 뭘까?

Route Next.js에서는pages 폴더 내부에 있는 파일들의 이름을 기준으로 자동으로 페이지가 생성이 된다. 실습환경 디렉토리 구조 & 레이아웃 Next.js 13 이상의 환경 태그 a태그를 사용해 링크를 연결하면, 해당 링크로 들어갔을 때 바뀌어야 하는 페이지 외의 변화가 없는 layout 같은 다른 부분들도 전부 처음부터 끝까지 요청 보내서 다운로드 받게 된다. 아래의 예시는 html 페이지와 css 페이지 이동시 개발자도구 - 네트워크 탭의 내용이다. 매번 서버로부터 html을 받아오기 때문에 비효율적이고, 리소스를 많이 사용하게 된다. 태그 a태그를 Link태그로 바꾸고 클릭하면 내가 이동하려는 페이지만 요청이 들어가게 된다. 하지만, 이조차도 이미 클릭해서 요청이 들어간 적이 있는 페이지는..

2워노
'Link' 태그의 글 목록