КОГДА ОБЫЧНОЕ ОБНОВЛЕНИЕ СЛОМАЛО НАШЕ ПРИЛОЖЕНИЕ

Мы нашли баг. Основные маршруты работали нормально. Вложенные маршруты вызывали полную перезагрузку страницы. Боковая панель сбрасывалась каждый раз. Приложение казалось нестабильным.

Локально всё работало. В продакшене всё сломалось.

Мы использовали Next.js static export на Azure Static Web Apps. У этой конфигурации нет серверной среды выполнения (server runtime). Она раздает статические файлы.

Проблема заключалась в soft navigation. Next.js нужны данные payload для плавных переходов. Для первой загрузки ему нужен HTML.

Наши правила rewrite в Azure были слишком широкими. Azure отправлял HTML, когда Next.js запрашивал данные payload. Роутер давал сбой. Приложение перезагружалось.

Мы исправили это с помощью автоматизации. Мы создали инструмент для генерации rewrite rules на основе результатов сборки (build output). Теперь инструмент:

  • Сканирует файлы динамических маршрутов.
  • Создает специфические правила для HTML и payload.
  • Сортирует правила по приоритету.
  • Записывает итоговый конфигурационный файл.

Это исключило ошибки ручного ввода.

Если вы используете static export на Azure:

  • Автоматизируйте конфигурационные файлы.
  • Тестируйте soft navigation.
  • Проверяйте, не возвращают ли запросы payload HTML-код.
  • Относитесь к rewrite rules как к критически важной инфраструктуре.

Сложные фронтенд-баги часто прячутся на стыке результатов сборки и правил хостинга.

Источник: https://dev.to/suraj_thallapelli_55c6f59/when-a-simple-refresh-broke-our-production-app-nextjs-static-export-on-azure-2ano