Nuxt mid-level certification launch date announced!

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

Nuxt позволяет статически отрисовывать страницы во время сборки для улучшения определенных показателей производительности или SEO

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

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

Узнайте больше о команде nuxi generate.

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

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

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

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

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

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

Подробнее о предварительном рендеринге читайте в документации Nitro.

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

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

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

Эта функция является экспериментальной, и для ее использования необходимо включить опцию experimental.inlineRouteRules в nuxt.config.
pages/index.vue
<script setup>
// Или установить на уровне страницы
defineRouteRules({
  prerender: true,
});
</script>

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

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

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    "/": { prerender: true },
  },
});

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

prerenderRoutes

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

pages/index.vue
<script setup>
prerenderRoutes(["/some/other/url"]);
</script>

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

Nuxt-хук prerender:routes

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

nitro.config.ts
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

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

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