인프런 커뮤니티 질문&답변

const Home = () => {
  return (
    <div>
      <h1>홈페이지입니다.</h1>
      <p>내용</p>
      <Link href="/sub">서브페이지</Link>
    </div>
  );
};

const SubPage = () => {
  console.log('sub');
  return (
    <div>
      <h1>서브페이지입니다</h1>
      <p>내용입니다.</p>
    </div>
  );
};

https://test1-seven-ashen.vercel.app
개발환경과 프로덕션환경이 다른 것 같아서 임시로 배포해봤습니다.
"/", "/sub" 이 두 가지의 경로만 갖는 간단한 사이트입니다.

초기 "/" 경로로 진입했을 때 네트워크 탭을 확인하면 html 파일 하나와 여러js파일 그리고 파일 형식을 알 수 없는 sub?_rsc=acgkz를 불러옵니다.(해당 파일을 클릭하면 sub페이지가 보여집니다.) 그리고 Home에 있던 "/sub"에 대한 Link를 클릭해서 이동하면 네트워크 탭에선 아무것도 불러오지 않습니다.

1. 초기 페이지 로드시에는 서버로부터 완성된 html파일을 받아 렌더링한다.
2. 페이지에 Link가 있을 경우 서버에서 그에 해당하는 페이지 데이터를 프리패치한다. (sub?_rsc=acgkz)
3. 사용자가 페이지 이동시에 이미 완성된 sub?_rsc=acgkz로 새로운 화면을 렌더링한다.

이정도로 이해했는데 맞는지 모르겠습니다. 답변에서 말씀하신 html 부분이라는 게 sub?_rsc=acgkz 이게 맞는지도 궁금하구요.
그럼 Link 클릭하기 전에 클라이언트에서 이미 완성된 파일을 갖고 있다는 건데 그럼 "/sub"로 이동하기 전에 서버에서 sub?_rsc=acgkz를 완성하면서 console.log도 실행된걸까요? 아니면 sub?_rsc=acgkz 내부에 완성된 html 파일과 "/sub"로 이동했을 때 실행할 자바스크립트 로직이 분리되어 존재하고 있는 걸까요?

npm run dev로 실행한 환경에선 "/sub"로 이동했을 때 서버(터미널)에 console.log가 출력되었습니다.

질문이 많아서 죄송합니다. 검색도 해보고 공식문서도 보고 있는데 명확한 동작 원리를 파악하기가 어렵네요.

네 그 파일이 sub 파일이 맞고요.

Link 컴포넌트의 특징은, 화면에 Link 태그가 보이면 그 주소 파일을 미리 불러옵니다. 프리페치가 맞고요.

/sub 으로 이동할 때 네트워크탭에 아무것도 없나요? 그런데 백엔드에서 그 때 콘솔로그가 찍히는 건 말이 안 됩니다.

1. https://test1-seven-ashen.vercel.app
   네 /sub 으로 이동할 때 네트워크탭에 아무것도 새로 불러오지 않더라구요.
   그래서 프리패치해서 가져온 sub파일로 렌더링한다고 생각했습니다.
   2. npm run dev로 실행한 개발 환경에서는 /sub로 이동한 뒤 터미널에 console.log가 찍혔습니다. 배포환경에선 백엔드 console.log 확인하는 방법을 몰라서 어떻게 동작하는 지 모르겠네요.
   
   결국 제가 궁금했던 건 Link로 이동했을 때 화면에 렌더링되어야하는 jsx코드와 javascript코드가 어떤 위치(클라이언트, 서버), 어떤 시점에서 실행되는 지가 궁금했는데 음.. 명확한 답을 얻기가 쉽지 않은 것 같아서
   
   일단 Link를 사용하면 서버에서 완성한 파일(html 비슷한 무언가)을 프리패치하여 이동시에 클라이언트사이드 렌더링한다.
   정도로 이해하고 넘어가려고 합니다;;ㅜㅜ

아아, 백엔드가 아니라 프론트서버입니다. 프론트서버에서 /sub 페이지 방문시 콘솔로그가 찍히는데 정작 브라우저에서는 /sub 페이지 요청이갔다고 프론트서버에 아무것도 안 보내는 게 이상한거긴 하거든요. 프론트서버가 브라우저가 /sub 페이지로 이동했는지 어떻게 알았을까하는 의문입니다.

아 프론트 서버라고 하는 군요.

개발 환경에서는 "/"에서 sub?_rsc=acgkz를 미리 받아오기도 하지만
"/sub"로 이동했을 때 네트워크탭에 sub?_rsc=acgkz가 또 불러와지는 걸 확인했습니다.

vercel에 배포한 것에선 "/sub"로 이동했을 때 아무것도 불러오지 않구요.

https://dev.to/peterlidee/static-and-dynamic-rendering-in-next-13-52gb

제가 봤을 때는 배포 후에는 서버컴포넌트이지만 스태틱렌더링이 적용된 것 같습니다. 빌드타임에 페이지가 확정되었으므로 링크 이동을 해도 프리페치 외에는 추가로 더 가져올 게 없는 것이죠. 다이나믹렌더링으로 전환되면 요청을 보낼 것 같네요.

아하 얼추 이해가 된 것 같아요. 답변 감사합니다!