Пререндеринг

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

Предварительный рендеринг на основе обхода

Используйте команду nuxt generate для сборки и пререндеринга вашего приложения с помощью краулера Nitro. Эта команда похожа на nuxt build с опцией nitro.static, установленной на true, или запуском nuxt build --prerender.

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

npx nuxt generate

yarn nuxt generate

pnpm nuxt generate

bun x nuxt generate

deno x nuxt generate

Содержимое .output/public можно выложить на любой статический хостинг или открыть локально, например: npx serve .output/public.

Работа краулера Nitro:

1. Загрузить HTML корневого маршрута приложения (/), любые нединамические страницы в каталоге ~/pages и остальные маршруты из массива nitro.prerender.routes.
2. Сохранить HTML и payload.json в каталог ~/.output/public/ для статической отдачи.
3. Найти в HTML все теги <a href="..."> для перехода на другие маршруты.
4. Повторять шаги 1–3 для каждой найденной ссылки, пока не останется ссылок для обхода.

Важно понимать: страницы без ссылки с уже обнаруженной страницы не попадут в пререндер автоматически.

Извлечение полезной нагрузки (payload)

Nuxt создаёт _payload.json рядом с HTML для:

• пререндеренных маршрутов (на этапе сборки)
• маршрутов ISR/SWR (при первом запросе)

В payload сериализованы данные из useAsyncData и useFetch. При клиентской навигации подгружаются эти кэшированные payload вместо повторных запросов. Для динамических маршрутов вроде pages/[...slug].vue задайте правила маршрутов, например '/**': { isr: true }.

Выборочный пререндеринг

Вы можете вручную указать маршруты, которые Nitro будет извлекать и пререндерить во время сборки, или игнорировать маршруты, которые вы не хотите пререндерить, например /dynamic в файле nuxt.config:

// @errors: 2353
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/user/1', '/user/2'],
      ignore: ['/dynamic'],
    },
  },
})

Вы можете объединить это с опцией crawlLinks, чтобы пререндерить набор маршрутов, которые краулер не может обнаружить, например, /sitemap.xml или /robots.txt:

// @errors: 2353
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/sitemap.xml', '/robots.txt'],
    },
  },
})

Установка nitro.prerender в true аналогична установке nitro.prerender.crawlLinks в true.

Те же правила можно задать вручную через routeRules.

export default defineNuxtConfig({
  routeRules: {
    // Set prerender to true to configure it to be prerendered
    '/rss.xml': { prerender: true },
    // Set it to false to configure it to be skipped for prerendering
    '/this-DOES-NOT-get-prerendered': { prerender: false },
    // Everything under /blog gets prerendered as long as it
    // is linked to from another page
    '/blog/**': { prerender: true },
  },
})

То же можно задать прямо в файле страницы через defineRouteRules.

<script setup>
// Or set at the page level
defineRouteRules({
  prerender: true,
})
</script>

<template>
  <div>
    <h1>Homepage</h1>
    <p>Pre-rendered at build time</p>
  </div>
</template>

Это будет преобразовано в:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
  },
})

Конфигурация пререндера в рантайме

prerenderRoutes

Через контекст Nuxt во время выполнения можно зарегистрировать дополнительные маршруты для пререндера Nitro.

<script setup>
prerenderRoutes(['/some/other/url'])
prerenderRoutes('/api/content/article/my-article')
</script>

<template>
  <div>
    <h1>This will register other routes for prerendering when prerendered</h1>
  </div>
</template>

prerender:routes — хук Nuxt

Вызывается перед предварительным рендерингом для регистрации дополнительных маршрутов.

export default defineNuxtConfig({
  hooks: {
    async 'prerender:routes' (ctx) {
      const { pages } = await fetch('https://api.some-cms.com/pages').then(
        res => res.json(),
      )
      for (const page of pages) {
        ctx.routes.add(`/${page.name}`)
      }
    },
  },
})

prerender:generate — хук Nitro

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

export default defineNuxtConfig({
  nitro: {
    hooks: {
      'prerender:generate' (route) {
        if (route.route?.includes('private')) {
          route.skip = true
        }
      },
    },
  },
})