Link 컴포넌트는 어떻게 흰 화면을 보여주지 않을 수 있을까?

🙄궁금했던 이유

import Link from 'next/link';
import React from 'react';

const HomeHeader = () => {
  return (
    <header>
      <div className="">
        <Link href={'https://mail.google.com'} className=" hover:underline">
          Gmail
        </Link>
        <Link href={'https://image.google.com'} className=" hover:underline">
          Images
        </Link>
        <Link href={'/zinyu'} className=" hover:underline">
          Zinyu
        </Link>
      </div>
    </header>
  );
};

export default HomeHeader;

Next.js로 구성한 프로젝트에서 Link 컴포넌트를 이용해 라우팅을 해줬습니다.

그런데 이게 빌드된 결과물을 보면 따로 어떤 처리가 들어간것도 아니라

그냥 href 속성만 가진 a태그로 변하게되는데 Link 컴포넌트는 어떻게 흰화면을 보여주지 않을 수 있는걸까요?

어떻게 새로고침 없이 url을 변경시켜줄 수 있는 것일까요?

https://hun1846.medium.com/next-js-link-db4a183a68a0

Next JS <Link>

요 링크에서 확인해볼 수 있었고

https://coffeeandcakeandnewjeong.tistory.com/5

[번역] The Next.js 핸드북

요기에서도 확인할 수 있지만 글의 분량이 길어서 ctrl+f 로 탐색하시는 것을 추천드립니다.

 

간단하게 요약하면 다음과 같은 이유입니다.

Link의 href에 등록된 경로는 next.js가 (마법같은 것을 부려서) 해당 경로의 페이지를 미리 렌더링합니다.

이렇게 html을 사전렌더링해두고 Link 변경 이벤트가 발생하면 사전에 만들어둔 html을 보여주는것으로

새로고침 없는 화면전환을 보여줄 수 있는 것입니다.

 

실제로 간단한 화면전환 코드를 작성하고 개발자도구의 Network 탭에서 테스트를 해보면 더 쉽게 알아볼 수 있습니다.