Turbolinks는 페이지 전환과 에셋 재로딩을 지능적으로 처리해 체감 성능을 끌어올리는 최적화 기술입니다. 조건부 GET 요청 방식과 달리 Rails 앱의 Ruby 코드를 전혀 수정할 필요가 없습니다. Turbolinks 5는 어디서든 동작하는(Rails 없이 정적 페이지에서도) 자바스크립트 라이브러리로, 지원하지 않는 브라우저에서는 우아하게 기능을 포기하는 방식으로 안전하게 작동합니다.
Turbolinks 5란?
Turbolinks는 Rails 4부터 Rails에 기본 번들되어 새 애플리케이션에 포함되었습니다. Rails 5에는 기존의 'Turbolinks Classic'을 완전히 재작성한 Turbolinks 5가 탑재되어 있습니다.
Rails와 함께 배포되지만, 새 버전의 Turbolinks는 순수 자바스크립트 라이브러리입니다. 따라서 어떤 HTML 페이지든 <script> 태그로 삽입하거나 앱의 자바스크립트 번들에 포함시키기만 하면 바로 사용할 수 있습니다.
포함되면 Turbolinks는 같은 도메인을 가리키는 모든 링크를 자동으로 찾아 클릭 이벤트 리스너를 연결합니다. 해당 링크 클릭은 가로채고, 일반적인 이동 대신 자바스크립트의 XMLHttpRequest를 통해 백그라운드에서 링크된 페이지를 요청합니다. 그 후 다음 네 가지가 일어납니다:
- 현재 페이지의 복사본이 나중에 쓰이도록 Turbolinks 캐시에 저장됩니다
- XHR 결과의
<body>로 현재 페이지의<body>를 교체합니다 - XHR 결과의
<head>와 현재 페이지의<head>를 병합합니다 - History API를 사용해 브라우저 URL을 변경합니다
<head>를 병합하기 때문에 두 페이지에 모두 존재하는 CSS나 자바스크립트 파일 같은 에셋을 브라우저가 다시 로드하고 재렌더링할 필요가 없습니다. 특히 대부분의 페이지에서 공통으로 사용하는 에셋이 많다면 앱 속도가 눈에 띄게 빨라질 수 있습니다.
뷰가 몇 개 있는 새 Rails 5 앱에서 링크를 클릭하고 뒤로 가기 버튼을 누르며 이동해 보면 Turbolinks가 동작하는 모습을 확인할 수 있습니다. 브라우저의 네트워크 탭에서 Turbolinks를 통해 로드된 페이지 요청이 "xhr"로 표시되고, 매 요청마다 에셋이 다시 로드되지 않는 것도 확인할 수 있습니다.
캐싱과 페이지 미리보기
같은 페이지에 대한 후속 요청 속도를 높이기 위해 Turbolinks는 최근 방문한 페이지의 캐시를 유지합니다. 덕분에 예컨대 뒤로 가기 버튼을 누르면 이전 페이지를 즉시 렌더링할 수 있습니다.
느린 페이지의 체감 성능을 높이기 위해, 캐시에 해당 페이지가 존재하면 미리보기를 먼저 보여줍니다. 링크를 클릭하면 최신 버전이 로드되는 동안 캐시된 버전이 화면에 표시됩니다.
주의할 점
Turbolinks는 브라우저의 기본 기능 중 일부를 다시 구현하기 때문에, 활성화 여부에 따라 몇 가지 동작이 달라집니다.
turbolinks:load 이벤트와 <script> 태그
링크를 클릭할 때마다 페이지가 새로 고침되지 않으므로, window.onload나 DOMContentLoaded로 페이지 로드 시 자바스크립트를 실행하는 기존 방식은 더 이상 동작하지 않습니다. 이를 해결하려면 Turbolinks가 제공하는 turbolinks:load 이벤트를 대신 사용하세요:
document.addEventListener("turbolinks:load", function() {
// ...
})
브라우저 로딩 상태
페이지 간 전환 시 요청이 백그라운드에서 실행되므로 브라우저의 로딩 표시기가 나타나지 않습니다.
이를 보완하기 위해 Turbolinks는 페이지가 로딩 중임을 알리기 위해 500밀리초 후 페이지 상단에 파란색 바(CSS로 스타일링 가능)를 표시합니다.
$ rails new --skip-turbolinks를 써야 할까?
'새 Rails 앱을 생성할 때 빼버리는 옵션'으로 여겨졌던 Turbolinks Classic 시절과 비교하면, Turbolinks 5는 많이 발전했습니다. 이제 Rails에 의존하지 않는, 우아하게 성능을 저하시키는 순수 자바스크립트 플러그인이므로 위의 주의 사항만 염두에 두면 대부분의 앱에서 별도 설정 없이 잘 동작합니다.
그 대가로 Turbolinks는 쾌적한 속도 향상을 제공하고, 페이지를 열 때마다 정적 에셋이 다시 로드되지 않도록 해 네트워크 요청도 절약해 줍니다. 새 Rails 앱을 생성할 때는 Turbolinks를 그대로 두고 어떤 효과가 있는지 확인해 보세요. 기존 앱이라면 한번 적용해 보길 권합니다!
지금까지 Turbolinks 개요였습니다. 여러분의 앱에서 Turbolinks를 사용하고 계신가요? 경험을 들려주세요! 또한 AppSignal Academy의 이 글과 이전 글이 마음에 드셨는지, 다음에 어떤 주제를 다루길 원하시는지 @AppSignal로 알려주시면 감사하겠습니다.