터보 프레임 및 스켈레톤 로더를 사용한 지연 로딩 콘텐츠

Hotwire은 최소한의 JavaScript를 작성하면서 "reactive Rails"앱을 구축하기 위한 Basecamp의 새로운 프런트엔드 도구 모음입니다.

일부 사람들에게 가장 흥미로운 기능은 서버 렌더링 HTML의 실시간 스트리밍이지만 제가 가장 좋아하는 추가 기능은 Turbo Frame 입니다.

Turbo Frame은 사용할 때 오그라들지 않는 강력한 iFrame입니다. 프레임은 페이지의 일부를 나타내며 고유한 탐색 컨텍스트를 가집니다.

놀랍도록 강력한 기능 중 하나는 프레임을 지연 로딩하는 것입니다. 매일 볼 수 있는 이 패턴의 한 예는 GitHub 활동 피드입니다.



먼저 페이지의 "외부 셸"을 로드한 다음 페이지의 나머지 부분을 채우기 위해 더 많은 콘텐츠를 가져오는 AJAX 호출을 만들 수 있습니다. 느린 페이지 속도를 높이는 좋은 방법입니다.

그러나 한 가지 단점은 페이지 콘텐츠가 약간 이동한다는 것입니다. "로드 중"스피너는 하나의 작은 사각형이지만 결과는 긴 이벤트 피드입니다.

이 문제를 해결하는 방법은 “skeleton screen” or “skeleton loader”을 사용하는 것입니다. 이 UI 패턴은 콘텐츠의 빈 버전을 자리 표시자로 사용하고 콘텐츠가 최종적으로 로드될 때 거슬리는 영향을 줄입니다.



이 두 가지 개념은 땅콩 버터와 젤리처럼 함께 어울립니다.

용법

지연 로드된 기본 터보 프레임은 다음과 같습니다.

<turbo-frame id="feed" src="/feed">
  Content will be replaced when /feed has been loaded.
</turbo-frame>

src 속성을 지정하면 페이지가 로드될 때 Frame이 자동으로 AJAX 요청을 만들고 해당 콘텐츠를 응답에서 일치하는 <turbo-frame>로 바꿉니다.

또한 로드의 loading 속성을 "eager"(즉시 로드) 또는 "lazy"(프레임이 페이지에 표시되면 로드)로 설정할 수 있습니다.

다음은 GitHub 활동 피드가 Rails 보기에서 어떻게 보이는지 보여줍니다.

<%= turbo_frame_tag :feed, src: activity_feed_path, loading: :lazy do %>
  Loading...
<% end %>

기본 "로드 중..."메시지를 자신의 스켈레톤 로더로 대체하여 다음 단계로 이동할 수 있습니다. Tailwind는 기본 제공animate-pulse 클래스를 사용하여 이를 정말 쉽게 만듭니다.

초기 프레임 내용으로 회색 사각형을 추가하기만 하면 됩니다.

<%= turbo_frame_tag :feed, src: activity_feed_path, loading: :lazy do %>
  <div class="flex flex-col space-y-6">
    <% 10.times do %>
      <div class="animate-pulse flex space-x-4">
        <!-- Avatar -->
        <div class="rounded-full bg-gray-400 h-12 w-12"></div>

        <!-- Details -->
        <div class="flex-1 space-y-4 py-1">
          <div class="h-4 bg-gray-400 rounded w-3/4"></div>
          <div class="space-y-2">
            <div class="h-4 bg-gray-400 rounded"></div>
            <div class="h-4 bg-gray-400 rounded w-5/6"></div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
<% end %>

Turbo Frames의 힘에 머리를 감고 나면 앱에서 오래된 HTML을 지연 로딩하여 이점을 얻을 수 있는 모든 종류의 위치를 ​​곧 발견하게 될 것입니다.

추가 리소스

핫와이어 문서: Turbo Frames

순풍 문서: animate-pulse