На конференции Laracon Тэйлор Отвел, создатель популярного PHP-фреймворка Laravel, представил Inertia.js версии 2.0 — самое крупное обновление с момента запуска этого пакета. Новая версия приносит множество полезных функций, которые значительно упростят разработку приложений на Laravel и Inertia.js.

Что такое Inertia.js?

Inertia.js — это библиотека, позволяющая создавать современные одностраничные приложения (SPA) с использованием классических серверных фреймворков, таких как Laravel. Она служит мостом между сервером и клиентом, позволяя разработчикам писать код на знакомых технологиях без необходимости использовать полноценные SPA-фреймворки, такие как Vue.js или React, в полном объеме. Inertia.js упрощает разработку, сохраняя при этом гибкость и производительность.

Новые возможности Inertia 2.0

Inertia 2.0 привносит множество улучшений, делающих разработку еще более удобной и эффективной. Рассмотрим основные из них:

Асинхронные запросы

Одним из ключевых нововведений является поддержка асинхронных запросов. Теперь приложения могут обрабатывать несколько запросов одновременно без задержек и индикаторов загрузки. Это особенно полезно для сложных проектов, где важно быстро обновлять интерфейс, например, показывать изменения до завершения запроса.

Пример использования:

<template>
  <Link
    method="put"
    :href="`/settings/notifications/${channel}`"
    :data="{ enabled: !enabled }"
    async
  >
    <!-- ... -->
  </Link>
</template>

Автообновление данных

Ранее для обновления данных приходилось использовать разные методы, такие как:

Метод Inertia.reload()
XHR-запросы
WebSockets

Теперь с помощью нового хелпера usePoll это стало проще и эффективнее. Данный метод позволяет автоматически или вручную обновлять данные на странице, например, в реальном времени показывать статистику или новые сообщения в чате.

Пример автоматического поллинга:

// Автообновление:
usePoll(3000, { only: ['notifications'] })
 
// Методы для включения / отключения автообновления:
const { stop, start } = usePoll(
    3000,
    { only: ['notifications'] },
    { autoStart: false }
)

Компонент WhenVisible

Новый компонент WhenVisible помогает загружать данные только тогда, когда элемент становится видимым на экране. Это улучшает производительность приложения, так как ненужные данные не загружаются сразу. Например, можно загружать список пользователей только тогда, когда пользователь прокрутит страницу до нужного места.

Пример использования:

inertia('dashboard', [
    'users' => Inertia::optional(
        fn () => User::all()
    ),
]);

<template>
  <WhenVisible data="users">
    <template #fallback>
      <div>Загрузка пользователей...</div>
    </template>
    
    <div v-for="user in users" :key="user.id">
      {{ user.name }}
    </div>
  </WhenVisible>
 
  <!-- Несколько свойств -->
  <WhenVisible :data="['users', 'teams']">
    <!-- -->
  </WhenVisible>
 
  <!-- Собственные параметры перезагрузки -->
  <WhenVisible
    :params="{
      only: ['users'],
      onFinish() {
        // ...
      }
    }">
    <!-- -->
  </WhenVisible>
</template>

Также можно настроить компонент так, чтобы он начинал загрузку данных заранее, как только пользователь достигнет определенного расстояния до элемента:

<template>
  <!-- Запрос произойдет, когда до элемента останется 300 пикселей -->
  <WhenVisible data="users" :buffer="300">
    <!-- -->
  </WhenVisible>
</template>

Бесконечная прокрутка

Inertia 2.0 делает реализацию бесконечной прокрутки проще. Используя компонент WhenVisible, можно автоматически загружать новые данные по мере прокрутки страницы. Это отлично подходит для лент новостей, каталогов товаров или результатов поиска, позволяя пользователям просматривать больше контента без необходимости переходить на новую страницу.

Пример реализации:

inertia('feed', [
    'items' => Inertia::merge(function () {
        // Объединяем элементы с существующими 
        return Post::paginate();
    }),
]);

<template>
    <WhenVisible
        :once="false"
        :params="{
            data: {
                page: page + 1,
            },
            only: ['items', 'page'],
            preserveUrl: true,
        }"
    >
        <Spinner />
    </WhenVisible>
</template>

Предзагрузка страниц (Prefetching)

Теперь приложения могут загружать страницы заранее, еще до того, как пользователь на них перейдет. Это ускоряет навигацию и делает взаимодействие с приложением более плавным. Предзагрузка может происходить сразу при загрузке страницы или при наведении курсора на ссылку.

Пример использования:

<template>
  <!-- Предзагружаем страницу при наведении -->
  <Link href="/" prefetch>Home</Link>
</template>

Отложенные свойства (Deferred Props)

Отложенные свойства — это данные, которые не загружаются сразу при открытии страницы. Вместо этого они автоматически загружаются после того, как основная часть страницы уже отображена. Раньше приходилось ждать, пока загрузятся все свойства, которые мы передаём.

Пример использования:

Метод Inertia::defer(...) указывает, какие данные должны загружаться позже:

inertia('dashboard', [
    'user_count' => Inertia::defer(fn () => User::count()),
    'order_count' => Inertia::defer(fn () => Order::count()),
    'average_purchases' => Inertia::defer(fn () => Order::average('total')),
    'users' => Inertia::defer(fn () => User::all()),
]);

В этом примере свойства user_count, order_count, average_purchases и users будут загружены после первоначальной загрузки страницы.

Отображение данных на фронтенде:

Компонент Deferred управляет состоянием загрузки и отображением данных:

<template>
  <!-- Ждем одно свойство -->
  <Deferred data="user_count">
    <template #fallback>
        <div>Загрузка...</div>
    </template>
 
    <div>Всего пользователей: {{ user_count }}</div>
  </Deferred>
 
  <!-- Ждем несколько свойств -->
  <Deferred :data="['user_count', 'order_count']">
    <template #fallback>
        <div>Загрузка...</div>
    </template>
 
    <!-- -->
  </Deferred>
</template>

В этом примере пока данные user_count или order_count не загрузятся, будет отображаться текст «Загрузка...», а после загрузки данные будут отображены на странице.

Inertia 2.0: Новые возможности для разработчиков