The speed of a single-page web application without having to write any JavaScript.

개요

Turbo을 사용하면 웹 소켓을 통해 HTML을 보낼 수 있습니다. 그것은 세 가지 구성 요소와 함께 제공,

터보 드라이브

터보 프레임

터보 스트림

페이지에 지연 로딩을 추가하기 위해 터보 프레임을 사용할 것입니다. Rails 애플리케이션에 직접 연결할 수 있습니다install Turbo.

지연 로딩을 사용하는 이유

블로그가 있고 독자가 블로그를 방문할 때 블로그가 ⚡️ 번개같이 빠르게 느껴지기를 원한다고 가정해 보겠습니다. 언젠가는 그들이 돌아오기를 바라기 때문입니다. 이를 달성하는 한 가지 방법은 지연 로딩이라는 매우 일반적인 기술을 사용하는 것입니다.

지연 로딩이란?

우리 서버는 블로그 게시물 대신 로딩 표시기가 있는 가벼운 HTML 페이지를 보낼 수 있습니다. 이 가벼운 페이지가 완전히 로드된 후에만 서버에서 블로그 게시물을 요청할 수 있습니다.

어디에서나 지연 로딩의 예를 볼 수 있습니다. 동영상을 지연 로드하는 예는 다음과 같습니다.


Mr. Beast가 아직 국가를 구입했는지 확인하기 위해 기다리는 동안 그들은 당신에게 skeleton loading indicators을 보여주고 있습니다.

지연 로드에 터보 프레임 사용

그렇다면 터보를 사용하여 블로그 게시물을 지연 로드하려면 어떻게 해야 할까요? 정말 간단합니다! 컨트롤러에 액션을 추가하기만 하면 기존 인덱스 액션에서 블로그 게시물 로드를 분리할 수 있습니다.

erb 템플릿부터 시작하겠습니다.

# index.html.erb
<h1>Hello World! Check out my blog posts below 👇</h1>
<%= turbo_frame_tag "blog_posts", src: blog_posts_path do %>
  <h2>Hold on a sec while I fetch my blog posts...</h2>
  <%# once blog_posts_path responds, it will replace everything inside this turbo frame tag with blog_posts.html.erb %>
<% end %>

# blog_posts.html.erb
<turbo-frame id="blog_posts">
  <h2>Done loading! Here are my blog posts.</h2>
  <%= @blog_posts.each do |post| %>
    <%= post.title %>
    <%= post.description %>
  <% end %>
</turbo-frame>

이제 컨트롤러에서:

# GET /blog
def index; end

# GET /blog_posts
def blog_posts
  @blog_posts = BlogPost.all
  render layout: false # Don't forget this optimization!
end

물론 routes.rb 에서 새 작업에 GET 경로를 추가하는 것을 잊지 마십시오.

이것이 지연 로딩을 달성하기 위해 터보 프레임으로 해야 할 전부입니다! 액션 1개와 뷰 1개만 추가하면 되었습니다.

살펴보겠습니다. 사용자가 index 페이지를 방문하면 블로그 게시물이 로드되고 있음을 알리는 아주 작은 파일index.html.erb을 사용자에게 보냅니다. 이 페이지가 브라우저에 로드되면 Turbo는 페이지에 터보 프레임 태그가 있는 것을 확인하고 src= 속성을 인식합니다.

<%= turbo_frame_tag "blog_posts", src: blog_posts_path do %>

그런 다음 Turbo는 blog_posts_path에 대한 요청을 시작하고 일치하는 터보 프레임 태그가 포함된 응답이 들어오면

# notice the id matches our turbo frame tag in index.html.erb
<turbo-frame id="blog_posts">
...
</turbo-frame>

Turbo는 마법처럼 작동하여 로드 표시기를 블로그 게시물로 대체합니다!

팁

Turbo 7 현재 터보 프레임에 loading="lazy" 속성을 추가할 수 있습니다. 그러면 사용자가 프레임을 볼 수 있게 되면(예: 사용자가 아래로 스크롤할 때) 프레임만 로드됩니다.

결론

Turbo는 매우 강력하며 JavaScript를 작성하지 않고도 Rails 앱을 현대화할 수 있도록 도와줍니다. 물론 Turbo를 Rails와 함께 사용할 필요는 없습니다! 내가 쓴 모든 내용은 당신이 특별히 미쳤다고 느끼면 JavaScript 앱에도 적용할 수 있습니다 😜.

자세한 내용은 공식 핸드북here을 확인하십시오.