Learn Nuxt with a Collection of 100+ Tips!
Релиз·  

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

Долгожданные функции для поклонников JAMstack были реализованы в версии 2.13: полный статический экспорт, улучшенная интеллектуальная предварительная выборка, интегрированный краулер, более быстрый ре-деплой, встроенный веб-сервер и новая опция цели для конфигурации. ⚡️

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

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

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

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

Содержание

История

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>
Полная статика не работает с ssr: 'false' (что то же самое, что и устаревший mode: 'spa'), поскольку этот режим используется только для рендеринга на клиенте (одностраничные приложения).

Запуск 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:

plugins/preview.client.js
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/

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

Узнайте больше о том, как перейти от @nuxtjs/dotenv к runtime-конфигурации.
← Вернуться к блогу