Turbo 프리페칭을 통한 Rails 앱 탐색 속도 향상

Turbo v8의 핵심적인 기능인 프리페칭은 사용자가 링크 위로 마우스를 100ms 이상 올리는 순간, 해당 링크가 가리키는 페이지를 백그라운드에서 미리 가져오기 시작합니다. 이는 사용자가 링크를 클릭하기 전에 이미 콘텐츠 로딩이 시작됨을 의미하며, 평균적으로 500-800ms의 시간적 이점을 제공하여 애플리케이션이 매우 빠르게 느껴지도록 만듭니다. 이러한 속도 향상의 주된 이유는 대부분의 웹 애플리케이션 지연이 페이지 로드 자체보다는 네트워크 왕복 시간에서 발생하기 때문입니다. Turbo는 사용자가 다음 행동을 고민하는 동안 미리 요청을 시작함으로써 이 네트워크 지연을 효과적으로 제거합니다. Rails 7+ 버전의 Hotwire에 포함된 Turbo v8은 기존의 link_to 헬퍼와 자동으로 연동되어 작동하므로, 개발자는 추가적인 마크업이나 JavaScript 코드 없이도 이 강력한 기능을 활용할 수 있습니다. 예를 들어, 학습 대시보드와 같이 사용자가 자주 탐색하는 사이드바 메뉴, 아티클 인덱스, 다단계 워크플로우 등에서 특히 높은 효과를 발휘합니다. 그러나 모든 페이지가 프리페칭의 이점을 누리는 것은 아닙니다. 예를 들어, 비용이 많이 드는 데이터베이스 쿼리를 실행하거나 준비 시간이 오래 걸리는 ‘데이터 내보내기’와 같은 페이지의 경우, 사용자가 실제로 클릭하기 전까지는 미리 로드할 필요가 없습니다. 이러한 경우에는 data: { turbo_prefetch: false } 속성을 해당 link_to에 추가하여 개별 링크에 대한 프리페칭을 쉽게 비활성화할 수 있습니다. 더 나아가, data-turbo-prefetch 속성을 사용하여 특정 HTML 섹션(예: <aside>, <main>) 내의 모든 링크에 대해 프리페칭을 일괄적으로 활성화하거나 비활성화하는 ‘스코핑’ 기능을 통해 더욱 정교한 제어가 가능합니다. 이는 빠른 탐색이 필요한 영역에는 속도 향상을 제공하고, 무거운 작업이 포함된 영역은 불필요한 리소스 소모를 방지하는 데 유용합니다. 또한, 모바일 사용자나 느린 네트워크 환경을 고려하여 turbo:before-prefetch 이벤트를 활용한 JavaScript 코드를 통해 동적으로 프리페칭을 취소할 수도 있습니다. navigator.connection?.saveData와 같은 API를 활용하여 사용자의 데이터 절약 모드 설정이나 네트워크 연결 유형에 따라 불필요한 프리페칭을 방지함으로써, 사용자 데이터 사용량을 존중하고 전반적인 성능을 최적화할 수 있습니다.