Редиректы

Unpoly — это библиотека для частичного обновления страниц без перезагрузки браузера. Одним из ключевых аспектов работы с Unpoly является правильная организация редиректов. В традиционных веб-приложениях редирект выполняется через стандартные HTTP-статусы (301, 302), но в Unpoly механика отличается из-за асинхронной природы загрузки контента.

Механизм редиректа

Когда запрос инициируется через Unpoly, сервер может вернуть:

  1. HTTP-редирект (3xx) — стандартный способ, который браузер обычно обрабатывает автоматически. В контексте Unpoly такие редиректы перехватываются библиотекой и преобразуются в внутренние переходы:

    • Unpoly анализирует заголовок Location.
    • Выполняется асинхронная загрузка нового содержимого без полной перезагрузки страницы.
    • Поддерживаются как временные (302 Found), так и постоянные (301 Moved Permanently) редиректы.

  2. Ответ с JavaScript-редиректом — сервер может вернуть страницу, содержащую скрипт, который выполняет up.redirect(url) или up.visit(url). Это позволяет программно контролировать направление перехода на уровне клиента.

Использование up.redirect

Метод up.redirect(url, options) выполняет перенаправление на указанную страницу с поддержкой следующих возможностей:

  • url — строка с адресом назначения.

  • options — объект настроек, где ключевыми являются:

    • target — CSS-селектор контейнера, в который будет загружен новый контент.
    • history — логика работы с историей браузера (push, replace, none).
    • cache — управление кэшированием контента (true/false).

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

up.redirect('/users', {
  target: '#main-content',
  history: 'push'
});

Этот код заменяет содержимое контейнера #main-content на содержимое /users и добавляет новый элемент в историю браузера, сохраняя возможность навигации кнопкой «назад».

Редиректы после форм

Типичный сценарий — отправка формы с последующим редиректом. В Unpoly это реализуется через:

  1. Атрибут up-target у формы:
<form action="/users" method="post" up-target="#main-content">
  <input type="text" name="name">
  <button type="submit">Создать</button>
</form>

Если сервер отвечает редиректом (3xx), Unpoly автоматически загружает целевой URL в контейнер #main-content. Это позволяет избегать полной перезагрузки страницы после успешной отправки формы.

  1. Сервер может вернуть JSON с указанием redirect_url:
{
  "redirect_url": "/users/123"
}

В этом случае клиентский код может обрабатывать объект и вызвать up.redirect(response.redirect_url) для асинхронного перехода.

Настройка поведения редиректов

Unpoly предоставляет глобальные и локальные настройки редиректов:

  • Глобальные события:

    • up:redirect — вызывается перед выполнением редиректа. Можно отменить переход, вернув false.
    • up:redirected — срабатывает после успешного переноса контента.

Пример обработки события:

up.on('up:redirect', function(event) {
  if(event.url.includes('/admin')) {
    console.log('Редирект на административный раздел');
  }
});
  • Локальные настройки для запроса:
up.submit(formElement, {
  redirect: {
    history: 'replace',
    cache: false
  }
});

Эта конфигурация позволяет контролировать сохранение истории и использование кэша при конкретной отправке формы.

Специфика работы с фрагментами

При редиректе в Unpoly можно указать, что загружать нужно не всю страницу, а конкретный фрагмент:

up.redirect('/dashboard', {
  target: '#dashboard-panel'
});

В этом случае сервер должен возвращать HTML, который содержит контейнер с соответствующим селектором. Если контейнер не найден, Unpoly автоматически поднимет ошибку и не обновит страницу. Такой подход экономит ресурсы и позволяет плавно обновлять интерфейс.

Особенности HTTP-статусов

  • 301 Moved Permanently — Unpoly воспринимает как постоянный редирект и может кешировать результат.
  • 302 Found / 303 See Other — используется для перенаправления после POST-запросов.
  • 307 Temporary Redirect / 308 Permanent Redirect — сохраняют метод запроса при переходе (важно для REST API).

Unpoly корректно обрабатывает все эти статусы, превращая их в асинхронные переходы без перезагрузки страницы.

Советы по отладке редиректов

  1. Включить up.log для отслеживания всех запросов и редиректов.
  2. Проверять наличие контейнера-цели на странице.
  3. Убедиться, что сервер возвращает корректный заголовок Location или поле redirect_url в JSON.
  4. Использовать события up:redirect и up:redirected для логирования и контроля переходов.

Программные редиректы и условия

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

if(user.role === 'admin') {
  up.redirect('/admin/dashboard', { target: '#main-content' });
} else {
  up.redirect('/home', { target: '#main-content' });
}

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

Итоговая архитектура

Правильное использование редиректов в Unpoly обеспечивает:

  • Плавную асинхронную навигацию.
  • Контроль истории браузера.
  • Возможность обновления только нужных частей страницы.
  • Унифицированную обработку редиректов с сервера и клиентской логикой.

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

Оглавление