Hotwired Turbo і використання разом з Laravel

Хочу поді­ли­ти­ся досві­дом вико­ри­ста­н­ня TurboJS разом з фрейм­вор­ком Laravel

Час публі­ка­ції 02/01/2026

Автор jmas 

1 пере­гля­дів 2 хви­лин читання

Зага­лом що таке Hotwire Turbo сво­ї­ми сло­ва­ми? Це неве­ли­ка JS бібліо­те­ка, котра займа­є­ться пере­хо­пле­н­ням подій, таких як клік за поси­ла­н­ням, під­ван­та­же­н­ням кон­тен­ту в фоні та замі­ні кон­тен­ту на новий, отри­ма­ний з сер­ве­ра. Якщо про­сто, то це бібліо­те­ка яка може зро­би­ти зі зви­чай­но­го сай­ту SPA (сайт без пере­за­ван­та­жень сто­рін­ки), не при­кла­да­ю­чи зна­чних зусиль.

Я вже опи­сав основ­ний прин­цип, але повто­рю в дета­лях. При­пу­сти­мо, у мене є тра­ди­цій­ний сайт зі зви­чай­ни­ми поси­ла­н­ня­ми на інші сто­рін­ки сай­ту. Я під­клю­чаю Turbo, дода­ю­чи тег script з поси­ла­н­ням на скріпт. Цей скріпт додає обро­бник click, котрий пере­хо­плює події і змі­нює зви­чну пове­дін­ку поси­ла­н­ня. Скріпт HTML нової сто­рін­ки по URL, шукає в HTML спе­ці­аль­ні теги turbo-frame або turbo-stream і міняє HTML пото­чної сто­рін­ки на новий у місцях, помі­чен­них цими тегами.

Пере­ва­ги Turbo це міні­маль­ний поріг вхо­ду, міні­маль­ні зуси­л­ля щоб пере­тво­ри­ти існу­ю­чий сайт на SPA, осно­ва це про­сті, зро­зумі­лі техно­ло­гії, сайт зали­ша­є­ться опти­мі­зо­ва­ним для пошу­ко­ви­ків. Недо­лі­ки — Turbo все ще зали­ша­є­ться ніше­вою техно­ло­гі­єю, потре­бує пере­роб­ки JS. Я реко­мен­дую Turbo для кон­тен­тних сай­тів, для котрих зали­ша­є­ться кри­ти­чним інде­кса­ція кон­тен­ту. Або сай­там, котрі потре­бу­ють опти­мі­за­ції за раху­нок того, що Turbo дозво­ляє час­тко­во під­ван­та­жу­ва­ти части­ни сто­рін­ки: від­па­дає потре­ба від­да­ва­ти в кожно­му запи­ті дан­ні для наві­га­ції, про­фі­лю, що еко­но­мить запи­ти до БД.

Turbo виріс як допов­не­н­ня до фрейм­вор­ку Ruby on Rails, про­те зали­ша­є­ться пов­ні­стю само­стій­ною бібліо­те­кою. Тому Turbo вико­ри­сто­ву­є­ться з інши­ми backend фрейм­вор­ка­ми. Я вико­ри­сто­вую його разом з Laravel і вже маю комер­цій­ний про­ект, осно­ва­ний на Turbo. Про­те в той час я ще не знав, що є пакет Turbo-Laravel, котрий додає фун­кції для управ­лі­н­ня Turbo з бекен­ду. Давай­те роз­бе­ре­мо які саме фун­кції заці­ка­ви­ли мене в цьо­му пакеті.

Сам пакет зна­хо­ди­ться за адре­сою turbo​-laravel​.com. Ста­ви­ться декіль­ко­ма коман­да­ми. Загаль­на інфор­ма­ція про те як пра­цює Turbo дуже добре опи­са­на на сто­рін­ці Overview. Тепер, що сподобалося.

Авто­ма­ти­чна гене­ра­ція ID для тур­бо-фрей­мів, дозво­ляє три­ма­ти ID у перед­ба­чу­ва­но­му вигляді:

<x-turbo::frame :id="[$post, 'comments']">
    <!-- Comments -->
</x-turbo::frame>

Хел­пе­ри-ско­ро­че­н­ня для кон­тро­лю над кешу­ва­н­ням, оновленнями:

<x-turbo::exempts-page-from-cache />
<x-turbo::refresh-method method="morph" />
<x-turbo::refresh-scroll scroll="preserve" />
<x-turbo::page-requires-reload />

Фун­кція-біл­дер для Turbo Stream, дозво­ляє ство­ри­ти стрім, накшталт того, як ми напов­ню­є­мо response() в Laravel:

turbo_stream()
    ->before($comment)
    ->view('comments.partials.flash_message', [
        'message' => __('Comment created!'),
    ]);

Дода­тко­ві мето­ди для Request, які дозво­ля­ють пере­ві­ря­ти з яко­го фре­йму від­прав­ле­но Request і інші речі:

if ($request->wasFromTurboFrame(dom_id($post, 'create_comment'))) {
    // ...
}

if (request()->wantsTurboStream()) {
        return turbo_stream($comment);
}

Дода­ні дода­тко­ві пере­хо­пле­н­ня, які сто­су­ю­ться валі­да­ції. Напри­клад, при від­прав­ці фор­ми, якщо Request не про­йшов валі­да­цію, то повер­не­ться HTML з помил­ка­ми. Також є можли­вість роз­пі­зна­ва­ти запи­ти від Hotwire Native.

Hotwite Turbo не лише окре­ма бібліо­те­ка, поряд є дода­тко­ві інстру­мен­ти котрі дозво­ля­ють: Hotwire Stimulus — дина­мі­чно чепля­ти JS кон­трол­ле­ри до DOM еле­мен­тів. Hotwire Native — обгор­тка на осно­ві WebView, котра дозво­ляю ство­ри­ти гібри­дний дода­ток для iOS та Android.