AI 요약관련 정보

• Astro의 Prefetch 기능은 사용자가 클릭하기 전에 다음 페이지를 예측하여 백그라운드에서 미리 로드함으로써 즉각적인 페이지 전환 경험을 제공합니다. 🚀
• 이 기능은 멀티 페이지 앱(MPA)에서도 단일 페이지 앱(SPA)처럼 빠른 탐색 속도를 구현하여 사용자 경험을 크게 향상시킵니다. ⏱️
• Prefetch를 활성화하려면 astro.config.mjs 파일에서 prefetch: true를 설정하고, 개별 내부 링크에는 data-astro-prefetch 속성을 추가하여 옵트인할 수 있습니다. 🔗
• Astro는 네 가지 Prefetch 전략을 제공합니다:
  • hover (기본값): 마우스 오버 시 미리 가져오기. 🖱️
  • tap: 탭/클릭 직전에 미리 가져오기 (모바일 환경에 적합). 👆
  • viewport: 링크가 뷰포트에 들어올 때 미리 가져오기. 👁️
  • load: 페이지 로드 완료 후 모든 링크 미리 가져오기 (대규모 사이트에는 비권장). ⚡
• astro.config.mjs에서 prefetch: { defaultStrategy: '...' }를 통해 전역 기본 Prefetch 전략을 지정할 수 있습니다. ⚙️
• prefetch: { prefetchAll: true }를 설정하여 모든 탐색 링크를 기본적으로 미리 가져오고, 특정 링크는 data-astro-prefetch="false"로 Prefetch에서 제외할 수 있습니다. 🌐
• <a> 태그가 아닌 요소나 사용자 정의 로직을 위해서는 @astrojs/prefetch 모듈의 prefetch API를 사용하여 프로그래밍 방식으로 페이지를 미리 가져올 수 있습니다. 💻
• Astro는 사용자의 네트워크 상태(느린 연결, 데이터 절약 모드)에 따라 Prefetch 전략을 자동으로 조정하여 낭비 없는 지능적인 동작을 제공합니다. 🧠
• Astro 5.6 이상에서는 eagerness 속성을 통해 페이지의 중요도나 리소스 집약도에 따라 Prefetch의 적극성(conservative, immediate, moderate)을 세밀하게 제어할 수 있습니다. 🎯
• 이 기능은 Chrome, Firefox, Safari 등 주요 브라우저에서 지원됩니다. 🌍