Прогрессивное улучшение с серверными действиями

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

Форма с action={serverAction} работает как обычная HTML-форма, отправляющая POST-запрос с полной перезагрузкой страницы, даже без JavaScript. Браузер отправляет форму, сервер выполняет действие и возвращает обновлённую HTML-страницу. Именно этот механизм лежит в основе веб-форм с 1995 года — серверные действия React изначально совместимы с ним.

Если JavaScript отсутствует, проверка должна выполняться на сервере. Серверное действие проверяет данные формы и, если проверка не пройдена, возвращает состояние ошибки. Сервер заново формирует страницу, встраивая сообщения об ошибках в HTML. Пользователь видит ошибки без выполнения какого-либо JavaScript на стороне клиента.

Когда React выполняет гидратацию страницы, он перехватывает отправку форм и обрабатывает её как асинхронные вызовы серверных действий, а не как POST-запросы с полной перезагрузкой страницы. Пользователь получает обновление на месте без перезагрузки страницы, видимое состояние ожидания и оптимистичный интерфейс — и всё это без изменения базовой структуры действия или формы.

Сервер формирует форму, встраивая начальное состояние в HTML. Когда React выполняет гидратацию, он подхватывает это начальное состояние без мерцания или несоответствия. Хук useActionState разработан для корректного согласования начального состояния, отрисованного сервером, с гидратацией на стороне клиента.

Переходы React позволяют интерфейсу оставаться интерактивным во время вызова серверного действия. Если обернуть отправку формы в переход, React сможет понизить приоритет обмена данными с сервером и сохранить отзывчивость страницы. Благодаря этому улучшенный с помощью JavaScript интерфейс ощущается значительно быстрее, чем страница с полной перезагрузкой.

Без JavaScript: пользователь нажимает кнопку отправки, браузер отправляет полноценный POST-запрос, сервер отвечает новой HTML-страницей, что вызывает краткую белую вспышку и сброс прокрутки. С JavaScript: React перехватывает отправку, действие выполняется асинхронно, а на месте обновляются только изменившиеся части страницы — без вспышки и сброса прокрутки.

Прогрессивное улучшение полезно для поисковых роботов, которые могут не выполнять JavaScript. Страница поиска или фильтрации, работающая как обычная HTML-форма с полной загрузкой страницы, доступна для индексации и сканирования. Благодаря результатам, сформированным на сервере, робот видит настоящее содержимое, а не пустые контейнеры, ожидающие JavaScript.

Программы чтения с экрана и вспомогательные технологии лучше всего работают с семантическим HTML. В прогрессивно улучшенной форме используются настоящие элементы <form>, <input> и <button>, которые вспомогательные технологии понимают без дополнительных средств. JavaScript добавляет живые области ARIA для объявления об ошибках, улучшая доступный базовый вариант, а не заменяя его.

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

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

Каков основной принцип прогрессивного улучшения?

Прогрессивное улучшение означает, что форма работает как обычная HTML-форма, отправляющая POST-запрос, без JavaScript. Серверные действия изначально это поддерживают: action={serverAction} включает отправку POST-запроса с полной загрузкой страницы. Затем гидратация React превращает форму в асинхронное обновление на месте с отображением состояний ожидания. Такой подход полезен для доступности, поисковой оптимизации и пользователей с нестабильным соединением, сохраняя при этом расширенные возможности JavaScript.