O Nuxt permite que páginas selecionadas de sua aplicação sejam renderizadas no momento da construção. O Nuxt servirá as páginas pré-construídas quando solicitadas, em vez de gerá-las dinamicamente.

Prerenderização baseada em rastreamento

Use o comando nuxt generate para construir e pré-renderizar sua aplicação usando o rastreador Nitro. Este comando é semelhante ao nuxt build com a opção nitro.static definida como true, ou executando nuxt build --prerender.

Isso construirá seu site, levantará uma instância do nuxt e, por padrão, pré-renderizará a página raiz / junto com quaisquer páginas do seu site às quais ela se vincule, quaisquer páginas do seu site às quais elas se vinculem, e assim por diante.

npx nuxt generate

Agora você pode implantar o diretório .output/public em qualquer serviço de hospedagem estática ou visualizá-lo localmente com npx serve .output/public.

Funcionamento do rastreador Nitro:

1. Carregue o HTML da rota raiz da sua aplicação (/), quaisquer páginas não dinâmicas no seu diretório ~/pages, e quaisquer outras rotas no array nitro.prerender.routes.
2. Salve o HTML e payload.json no diretório ~/.output/public/ para serem servidos estaticamente.
3. Encontre todas as tags de âncora (<a href="...">) no HTML para navegar para outras rotas.
4. Repita os passos 1-3 para cada tag de âncora encontrada até que não haja mais tags de âncora para rastrear.

É importante entender isso, pois páginas que não estão vinculadas a uma página descobrível não podem ser pré-renderizadas automaticamente.

Prerenderização Seletiva

Você pode especificar manualmente rotas que o Nitro buscará e pré-renderizará durante a construção ou ignorar rotas que você não deseja pré-renderizar, como /dynamic, no arquivo nuxt.config:

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

Você pode combinar isso com a opção crawlLinks para pré-renderizar um conjunto de rotas que o rastreador não pode descobrir, como seu /sitemap.xml ou /robots.txt:

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

Definir nitro.prerender como true é semelhante a definir nitro.prerender.crawlLinks como true.

Por fim, você pode configurar isso manualmente usando routeRules.

export default defineNuxtConfig({
  routeRules: {
    // Defina prerender como true para configurá-lo para ser pré-renderizado
    "/rss.xml": { prerender: true },
    // Defina como false para configurá-lo para ser ignorado na pré-renderização
    "/this-DOES-NOT-get-prerendered": { prerender: false },
    // Tudo sob /blog é pré-renderizado desde que
    // esteja vinculado a partir de outra página
    "/blog/**": { prerender: true },
  },
});

Como uma abreviação, você também pode configurar isso em um arquivo de página usando defineRouteRules.

<script setup>
// Ou defina no nível da página
defineRouteRules({
  prerender: true,
});
</script>

<template>
  <div>
    <h1>Página Inicial</h1>
    <p>Pré-renderizado no momento da construção</p>
  </div>
</template>

Isso será traduzido para:

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

Configuração de Prerenderização em Tempo de Execução

prerenderRoutes

Você pode usar isso em tempo de execução dentro de um contexto Nuxt para adicionar mais rotas para o Nitro pré-renderizar.

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

<template>
  <div>
    <h1>Isso registrará outras rotas para pré-renderização quando pré-renderizado</h1>
  </div>
</template>

Gancho prerender:routes do Nuxt

Isso é chamado antes da pré-renderização para registrar rotas adicionais.

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

Gancho prerender:generate do Nitro

Isso é chamado para cada rota durante a pré-renderização. Você pode usar isso para um tratamento mais detalhado de cada rota que é pré-renderizada.

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