Інтеграція Turbo Streams у Ruby on Rails для динамічного оновлення контенту без перезавантаження сторінки

Ruby on Rails, Turbo Streams · 20-3-2025

Інтеграція Turbo Streams у Ruby on Rails відкриває нові горизонти для динамічного оновлення контенту без необхідності перезавантаження сторінки. Ця технологія дозволяє створювати швидкі та інтерактивні веб-додатки, зменшуючи час відгуку та покращуючи загальний досвід користувачів. Розглянемо, як саме впровадити Turbo Streams у Ваш проєкт на Ruby on Rails.

Що таке Turbo Streams і чому це важливо

Turbo Streams є частиною Hotwire — надійного інструменту для розробки сучасних веб-додатків. На відміну від традиційних підходів, де для оновлення контенту потрібно перезавантажувати сторінку, Turbo Streams дозволяє відправляти оновлення через WebSocket або HTTP, що значно спрощує процес оновлення даних на клієнтській частині. Ваша аудиторія отримає миттєві оновлення, що робить взаємодію з веб-додатком більш плавною та привабливою.

Як налаштувати Turbo Streams у Ruby on Rails

Для початку інтеграції Turbo Streams у Ваш Ruby on Rails проєкт, перш за все, необхідно переконатися, що Ви використовуєте Rails 6 або новішої версії, оскільки Turbo Streams є частиною Hotwire, що був інтегрований у ці версії. Далі, додайте gem hotwire-rails до Вашого Gemfile:

gem 'hotwire-rails'

Після цього виконайте команду bundle install, щоб встановити необхідні залежності. Далі, запустіть команду rails hotwire:install, щоб автоматично налаштувати необхідні компоненти у Вашому проєкті. Цей крок також додасть підтримку Turbo Streams до Ваших контролерів та шаблонів.

Створення динамічних оновлень з Turbo Streams

Після налаштування Hotwire у проєкті, можна приступати до створення динамічних оновлень. Візьмемо приклад списку завдань, де потрібно в реальному часі додавати нові елементи без перезавантаження сторінки. Для цього створіть ресурс “Task” з відповідними контролерами та моделями.

У контролері використовуйте метод turbo_stream, щоб відправити відповідь, яка містить зміни. Наприклад:

def create
  @task = Task.new(task_params)
  if @task.save
    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to tasks_path }
    end
  else
    render :new
  end
end

Відповідний вид має містити turbo_stream формат, який буде обробляти оновлення:

<%= turbo_stream.prepend "tasks", partial: "tasks/task", locals: { task: @task } %>

Цей код оновлює список завдань, додаючи нове завдання у верхній частині без перезавантаження сторінки.

Переваги використання Turbo Streams

Використання Turbo Streams у Ruby on Rails дозволяє суттєво знизити навантаження на сервер завдяки зменшенню кількості запитів. Це також зменшує затримки, оскільки дані оновлюються в режимі реального часу. Крім того, спрощується процес розробки, оскільки не потрібно писати складний JavaScript-код для обробки AJAX-запитів або WebSocket.

Інтеграція Turbo Streams у Ваш Ruby on Rails проєкт може значно покращити взаємодію з користувачами, зменшити час відгуку та забезпечити більш інтерактивний досвід. Це рішення ідеально підходить для додатків, де швидкість та зручність мають вирішальне значення.