Next.js의 <Link> 컴포넌트는 뷰포트에 링크가 나타나는 순간 해당 페이지의 코드와 데이터를 미리 가져오는 프리페칭 기능을 지원합니다. 사용자가 링크를 클릭하기 전에 데이터를 미리 로드함으로써 사용자가 링크를 클릭했을 때 거의 즉시 페이지를 볼 수 있게 합니다.
여러분이 궁금해 할 수 있는 내용들
질문 1A : 뷰포트(Viewport)는 사용자의 웹 브라우저에서 현재 보이는 부분을 의미합니다. 쉽게 말해, 스크롤을 하기 전에 사용자가 볼 수 있는 화면의 영역입니다. 따라서 "뷰포트에 링크가 나타나는 순간"이라 함은, 사용자가 웹 페이지를 스크롤하거나 페이지를 이동하면서 해당 링크가 실제로 사용자의 화면(즉, 뷰포트 내)에 보이기 시작하는 순간을 의미합니다.
Q : 뷰포트가 링크에 나타나는 순간이란?
질문 2A : 기본적으로, <Link> 컴포넌트에 의해 렌더링된 링크가 사용자의 뷰포트 내에 나타나는 순간, Next.js는 해당 페이지의 데이터와 필요한 자원(예: JavaScript 파일)을 미리 가져오기 시작합니다. 마우스 오버보다 더 넓은 개념으로, 링크가 화면에 보이기만 하면 프리페칭이 시작됩니다. 이 프리페칭은 페이지를 더 빠르게 로드할 수 있도록 미리 준비하는 과정입니다.
Q : 사용자의 마우스가 링크 위에 mouseover 되는 순간 네트워크 요청이 생긴다는 것일까?
Next.js는 <Link>라는 리액트 컴포넌트를 제공합니다. <Link> 태그는 기본 HTML의 <a> 태그를 확장한 개념이에요. 크게 두 가지 주요 역할을 하기 때문에 우리는 기본 <a> 태그를 사용하기 보다는 <Link> 태그를 사용해야 합니다.