Nuxt 3.6

  Индикатор загрузки SPA

Если ваш сайт обслуживается с ssr: false или вы отключили серверный рендеринг на некоторых страницах, вас может особенно заинтересовать новый встроенный индикатор загрузки SPA.

Теперь вы можете поместить HTML-файл в ~/app/spa-loading-template.html с HTML-кодом, который вы хотите использовать для отображения экрана загрузки, который будет отображаться до тех пор, пока ваше приложение не будет загружено на эти страницы.

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

⚡️ Улучшения производительности

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

Мы также включаем компонент ошибок JS в основную точку входа, что означает, что если ошибка возникает, когда у пользователя нет подключения, вы все равно можете обработать ее с помощью ~/error.vue. (Это также должно уменьшить общий размер вашего бандла.)

👉 По сравнению с Nuxt 3.5.3 минимальный клиентский бандл уменьшился на ~0,7кБ. Давайте продолжать в том же духе!

🔥 Полностью статические серверные компоненты

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

👉 Это основано на новом, более расширенном формате полезной нагрузки JSON, поэтому убедитесь, что вы не отключили его, установив experimental.renderJsonPayloads в значение false.

🎨 Лучшее встраивание стилей

Если вы внимательно следите за своими метриками и не отключили experimental.inlineSSRStyles, вы должны увидеть на своей странице больше встроенного CSS и значительно больше внешнего CSS-файла. Теперь мы лучше дедуплицируем глобальный CSS, особенно добавленный такими библиотеками, как tailwind или unocss.

🎬 Управление анимацией

Чтобы предоставить вам более детальный контроль над компонентами страницы/макета, например, для создания пользовательских переходов с GSAP или другими библиотеками, мы теперь позволяем вам устанавливать pageRef на <NuxtPage> и layoutRef на <NuxtLayout>. Они будут переданы в базовые элементы DOM.

✨ Автоматическое определение предустановок 'статики'

До сих пор запуск nuxt generate давал одинаковый вывод для каждого деплоймент-провайдера, но с Nuxt 3.6 мы автоматически включаем статические предустановки поставщика. Это означает, что если вы развертываете статическую сборку (созданную с помощью nuxt generate) для поддерживаемого поставщика (в настоящее время vercel и netlify, а страницы cloudflare и github появятся в ближайшее время), мы предварительно отрисуем ваши страницы со специальной поддержкой для этого поставщика.

Это означает, что мы можем настроить любые правила маршрутизации (перенаправления/заголовки/и т.д.), которые не требуют функции сервера. Таким образом, вы должны получить лучшее из обоих миров при развертывании сайта, который не требует SSR во время выполнения. Это также разблокирует использование Nuxt Image на Vercel (с большим потенциалом для автоматической интеграции провайдера в ближайшее время).

💪 Повышенная безопасность типов

Теперь у нас есть лучшая поддержка для серверных #imports и дополнений, если вы используете новый ~/server/tsconfig.json, который мы предоставили в Nuxt 3.5. Поэтому при импорте из #imports в директории сервера вы получите автодополнение IDE для правильных мест импорта в Nitro и не увидите автоимпорты Vue, такие как useFetch, которые недоступны в ваших серверных маршрутах.

Теперь у вас также должна быть поддержка типов для runtime-хуков Nitro.

Наконец, мы удалили много мест, где объекты имели тип по умолчанию any. Это должно улучшить безопасность типов в Nuxt в ряде мест, где неопределенные типы были заменены на any:

• RuntimeConfig
• PageMeta
• NuxtApp['payload'] (теперь доступно из интерфейса NuxtPayload)
• ModuleMeta

Подробнее о том, как обновить свой код, если это касается вас, можно узнать в исходном PR.

⚗️ Встроенный Nitro 2.5

Этот релиз поставляется с новой версией Nitro 2.5, которая содержит целый список интересных улучшений, которые стоит проверить.

Особого внимания заслуживает экспериментальная поддержка стриминга, которая также стала возможной благодаря паре изменений в самом Nuxt.

🛠️ Новые инструменты для авторов модулей

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

Кроме того, этот релиз наконец-то разблокирует новый режим nuxt/module-builder, который должен улучшить поддержку типов для авторов модулей. Если вы автор модуля, вы можете рассмотреть возможность выполнения этих шагов миграции, чтобы опробовать его в ближайшие дни.

✅ Обновление

Как обычно, мы рекомендуем выполнить обновление следующим образом:

npx nuxi upgrade --force

Это также обновит ваш lockfile и обеспечит получение обновлений из других зависимостей, на которые опирается Nuxt, особенно в экосистеме unjs.

📃 Полный список изменений

Полное описание релиза читайте на https://github.com/nuxt/nuxt/releases/tag/v3.6.0