Переход на полную статику

Если слишком долго читать

1. Обновите nuxt до 2.14.0
2. Установите target: 'static' в nuxt.config.js
3. Запустите nuxt generate
4. Вот и все ✨

Бонус: вы можете запустить nuxt start, чтобы запустить локальный сервер, обслуживающий сгенерированное статическое приложение.

Примечание: в этом видео мы используем nuxt export, который устарел, в пользу nuxt generate.

Содержание

• Если слишком долго читать
• Содержание
• История
• Актуальные проблемы
• Новая опция конфигурации: target
• Более умный nuxt generate
  • Безумно быстрые статические приложения
  • Интегрированный краулер
  • Более быстрый ре-деплой
• Более умный nuxt start
• Режим предварительного просмотра
• Команды
  • Что делать дальше

История

Nuxt имел функцию статической генерации с nuxt generate начиная с v0.3.2 (ноябрь 2016 г.), с тех пор мы улучшили ее несколькими способами, но так и не добились полной статической генерации. Сегодня я рад сообщить, что полный статический экспорт теперь возможен с Nuxt 2.13.

Актуальные проблемы

nuxt generate в основном выполняет предварительный рендеринг, когда вы перемещаетесь на клиенте, вызываются asyncData и fetch, делающие запрос к вашему API. Многие пользователи просили поддержку "полностью статического" режима, то есть не вызывать эти 2 хука при навигации, поскольку следующая страница уже была предварительно отрисована.

Кроме того, опыт разработчика не является оптимальным:

• У вас есть доступ к req или res в SSR, но не при запуске nuxt generate.
• process.static имеет значение true только при запуске nuxt generate, что замедляет разработку модулей Nuxt или плагинов для статической генерации.
• Вам приходится указывать все динамические роуты в generate.routes, что усложняет задачу, поскольку у вас нет доступа к модулям nuxt.
• Вы не можете протестировать резервный вариант SPA в разработке, резервный вариант — это клиентская версия вашего приложения Nuxt, которая загружается при попадании на страницу 404.
• nuxt generate запускает nuxt build по умолчанию, что замедляет генерацию вашего сайта, если изменился только контент

Обратите внимание, что можно было получить полную статическую поддержку с помощью модуля nuxt-payload-extractor, но он был более многословным в использовании и имел ограничения.

Новая опция конфигурации: target

Чтобы улучшить пользовательский опыт, а также сообщить Nuxt, что вы хотите экспортировать свое приложение на статический хостинг, мы вводим опцию target в nuxt.config.js:

<script setup>
  import { ref, computed } from '#imports'

  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

Запуск nuxt dev с target: 'static' улучшит опыт разработчика:

• Удаление req и res из контекста
• Возврат к рендерингу на клиенте при возникновении ошибки 404, ошибок и перенаправлений (см. Возврат к SPA)
• $route.query всегда будет равен {} при рендеринге на сервере
• process.static будет иметь значение true

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

Более умный nuxt generate

Теперь, начиная с v2.14.0, вы можете использовать nuxt generate, и он сам определит, нужно ли выполнять сборку или нет.

Безумно быстрые статические приложения

nuxt generate с target: 'static' предварительно отрисует все ваши страницы в HTML и сохранит payload в файл, чтобы имитировать asyncData и fetch при навигации на клиенте. Это означает никаких больше HTTP-вызовов к вашему API при навигации на клиенте. Извлекая payload страницы в файл js, он также уменьшает размер обслуживаемого HTML, а также предварительно загружает его (из <link> в заголовке) для оптимальной производительности.

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

Интегрированный краулер

Вдобавок ко всему, в нем также есть краулер, который обнаруживает каждую относительную ссылку и генерирует ее:

Если вы хотите исключить несколько маршрутов, используйте generate.exclude. Вы можете продолжать использовать generate.routes, чтобы добавлять дополнительные маршруты, которые краулер не смог обнаружить.

Чтобы отключить краулера, установите generate.crawler: false в nuxt.config.js

Более быстрый ре-деплой

Разделив nuxt build и nuxt export, мы открываем новый ряд улучшений: предварительная визуализация страниц только в случае изменения контента, это означает: отсутствие сборки webpack → более быстрый ре-деплой.

Более умный nuxt start

После статической генерации приложения Nuxt в dist/ используйте nuxt start для запуска рабочего HTTP-сервера и обслуживания статического приложения, поддерживающего SPA Fallback.

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

Режим предварительного просмотра

Мы поддерживаем предварительный просмотр в реальном времени прямо из коробки, чтобы продолжать вызывать ваш API:

export default async function ({ query, enablePreview }) {
  if (query.preview) {
    enablePreview()
  }
}

Он автоматически обновит данные страницы (вызывая nuxtServerInit, asyncData и fetch).

При активации режима предварительного просмотра будут вызваны оригинальные методы asyncData и fetch.

Команды

В зависимости от target вы можете выполнить эти команды.

• server
  • nuxt dev: Запустить сервер разработки
  • nuxt build: Подготовить приложение Nuxt к продакшену
  • nuxt start: Запустить продакшен-сервер
• static
  • nuxt dev: Запустить сервер разработки (с поддержкой статики)
  • nuxt generate: Собрать приложение Nuxt (с поддержкой статики) для продакшена при необходимости и экспортировать его в статический HTML в каталог dist/
  • nuxt start: Раздавать продакшен-приложение из dist/

Что делать дальше