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

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

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

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

Это позволит создать ваш сайт, создать экземпляр nuxt и, по умолчанию, предварительно отрисовать корневую страницу / вместе со всеми страницами вашего сайта, на которые она ссылается, всеми страницами вашего сайта, на которые они ссылаются, и т. д.

npx nuxi 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 для каждого найденного тега привязки, пока не останется больше тегов привязки для сканирования.

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

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

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

export default 
defineNuxtConfig
({
  
nitro
: {
    
prerender
: {
      
routes
: ["/user/1", "/user/2"],
      
ignore
: ["/dynamic"],
    },
  },
});

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

export default 
defineNuxtConfig
({
  
nitro
: {
    
prerender
: {
      
crawlLinks
: true,
      
routes
: ["/sitemap.xml", "/robots.txt"],
    },
  },
});

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

Наконец, вы можете вручную настроить это с помощью routeRules.

export default 
defineNuxtConfig
({
  
routeRules
: {
    // Установите prerender в true, чтобы настроить предварительный рендеринг.
    "/rss.xml": { 
prerender
: true },
    // Установите значение в false, чтобы пропустить его при предварительном рендеринге.
    "/this-DOES-NOT-get-prerendered": { 
prerender
: false },
    // Все, что находится в /blog, пререндерится, пока на это
    // есть ссылка с другой страницы
    "/blog/**": { 
prerender
: true },
  },
});

В качестве сокращения вы также можете настроить это в файле страницы с помощью defineRouteRules.

<script setup>
// Или установить на уровне страницы
defineRouteRules({
  prerender: true,
});
</script>

<template>
  <div>
    <h1>Домашняя страница</h1>
    <p>Предварительно отрисовывается во время сборки</p>
  </div>
</template>

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

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

Runtime-конфигурация предварительного рендеринга

prerenderRoutes

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

<script setup>
prerenderRoutes(["/some/other/url"]);
</script>

<template>
  <div>
    <h1>Это зарегистрирует другие маршруты для пререндеринга при предварительном рендеринге.</h1>
  </div>
</template>

Nuxt-хук prerender:routes

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

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}`);
      }
    },
  },
});

Nitro-хук prerender:generate

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

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