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

안녕하세요 이정환입니다. 순서대로 답변드리겠습니다.

1) 상황에 따라 다릅니다. 프리페칭 대상 페이지가 정적 페이지라면 RSC Payload와 JS Bundle을 함께 불러옵니다. 그러나 동적 페이지라면 RSC Payload만 불러옵니다.

2) 프리페칭으로 불러온 RSC Payload는 일정 기간동안 캐시(클라이언트 라우터 캐시)에 보관된 이후 제거됩니다. 따라서 제거된 이후에 페이지 이동이 발생했을 경우에는 말씀하신 상황처럼 다시 불러오는 경우가 발생할 수 있습니다.

혹은 프리페칭으로 불러오는 RSC Payload는 해당 페이지에서 즉시 불러올 수 있는 부분만 불러오게 됩니다. 따라서 특정 페이지에 동적으로 혹은 실시간으로 불러와야 하는 데이터가 있는 경우 프리페칭시에는 불러오지 못한 RSC Payload를 페이지 이동시에 추가로 불러오게 됩니다.

3) 인덱스 페이지의 RSC Payload는 초기 접속 과정에서 이미 받아왔기에 다시 불러오지 않습니다.

4) 해당 페이지에서 인덱스 페이지의 RSC Payload를 프리페칭하기 때문입니다.

5) 네 맞습니다. 정적인 인덱스 페이지에 포함된 JS Bundle을 불러오는 과정에서 서치바의 코드가 포함됩니다.

안녕하세요, 인프런 AI 인턴입니다. 고은님!

프리페칭과 관련하여 질문해주신 내용에 대해 자세히 설명드리겠습니다.

1. 클라이언트 컴포넌트 포함 서버 컴포넌트의 프리페칭

프리페칭 시, Next.js는 주로 서버 컴포넌트와 관련된 데이터를 먼저 패치합니다. 클라이언트 컴포넌트가 포함되어 있다면, 해당 컴포넌트를 실행하기 위해 필요한 JS 번들은 실제로 해당 페이지를 방문할 때 불러오게 됩니다. 예를 들어, RSC payload를 통해 서버에서 필요한 데이터만 미리 불러오고 클라이언트 컴포넌트의 실행은 사용자가 해당 페이지를 방문할 때 발생합니다.

2. RSC payload의 프리페칭 동작

프리페칭은 주로 예상되는 사용자 이동 경로에 따라 이루어집니다. 특정 페이지에서는 사전에 Link를 통해 연결된 페이지의 데이터를 미리 가져오게 되는데, 이는 사용자 경험을 향상시키려는 목적입니다. 프리페칭 데이터가 있음에도 해당 데이터가 다시 설정되는 이유는 사용자가 이전에 본 데이터와 현재 데이터를 다시 확인하거나 갱신하는 과정일 수 있습니다.

3. 이전 페이지의 RSC payload가 나타나지 않는 이유

이전 페이지에서 이동할 때 새로운 페이지로의 전환이 이루어지고, 현재 페이지의 상태에 따라 새로운 데이터 페칭이 발생할 수 있어, 다음 페이지에 대한 프리페칭은 필요하지 않을 수 있습니다. 이전 페이지의 데이터를 네트워크 요청에서 다시 보지 못하는 경우는 캐시에 저장된 데이터를 사용하거나 데이터 요청이 따로 없기 때문일 수 있습니다.

4. 새로고침 후 인덱스 페이지로 이동 시 RSC payload가 나타나지 않는 이유

새로고침 후에도 페이지가 이미 브라우저의 캐시에 데이터를 가지고 있는 경우, 브라우저는 동일한 정보를 서버에 재요청하지 않고 캐시된 데이터를 사용합니다. 따라서 네트워크 탭에서 해당 정보가 나타나지 않을 수 있습니다.

5. URL을 통한 이동 시 JS 번들링

URL을 통해 직접 페이지에 접근할 경우, 페이지에 필요한 모든 자바스크립트 코드가 로드됩니다. 이 경우, 같은 레이아웃을 사용하는 컴포넌트들은 공통 파일로 크게 나뉠 수 있으며, dependencies에 따라 기본적인 JS 번들이 포함되어 프리페칭 됩니다.

추가적으로 참고하면 좋은 자료들이 있습니다:
- How Next.js Handles Data Fetching (RSC Payload)
- Optimizing Next.js Performance with Prefetching

제가 제공한 설명이 고은님의 이해에 도움이 되었으면 좋겠습니다. 질문자님의 이해도를 높이기 위해 기존의 질문 및 답변을 참고하며 설명을 구성해보았습니다. 만약 더 궁금한 부분 있으시면 언제든지 이어서 질문해 주세요. 곧 지식공유자분께서 추가적인 답변을 드릴 것입니다. 🙏