Nuxt permite que ciertas páginas de tu aplicación se rendericen en el momento de la construcción. Nuxt servirá las páginas preconstruidas cuando se soliciten en lugar de generarlas al vuelo.

Pre-renderizado basado en rastreo

Usa el comando nuxt generate para construir y pre-renderizar tu aplicación utilizando el rastreador Nitro. Este comando es similar a nuxt build con la opción nitro.static configurada a true, o ejecutando nuxt build --prerender.

Esto construirá tu sitio, levantará una instancia de nuxt y, por defecto, pre-renderizará la página raíz / junto con cualquier página de tu sitio a la que enlace, cualquier página de tu sitio a la que estas enlacen, y así sucesivamente.

npx nuxt generate

Ahora puedes desplegar el directorio .output/public en cualquier servicio de alojamiento estático o previsualizarlo localmente con npx serve .output/public.

Funcionamiento del rastreador Nitro:

1. Carga el HTML de la ruta raíz de tu aplicación (/), cualquier página no dinámica en tu directorio ~/pages, y cualquier otra ruta en el array nitro.prerender.routes.
2. Guarda el HTML y payload.json en el directorio ~/.output/public/ para ser servido estáticamente.
3. Encuentra todas las etiquetas de anclaje (<a href="...">) en el HTML para navegar a otras rutas.
4. Repite los pasos 1-3 para cada etiqueta de anclaje encontrada hasta que no haya más etiquetas de anclaje para rastrear.

Esto es importante de entender ya que las páginas que no están enlazadas a una página descubrible no pueden ser pre-renderizadas automáticamente.

Pre-renderizado selectivo

Puedes especificar manualmente las rutas que Nitro buscará y pre-renderizará durante la construcción o ignorar rutas que no deseas pre-renderizar como /dynamic en el archivo nuxt.config:

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

Puedes combinar esto con la opción crawlLinks para pre-renderizar un conjunto de rutas que el rastreador no puede descubrir como tu /sitemap.xml o /robots.txt:

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

Configurar nitro.prerender a true es similar a nitro.prerender.crawlLinks a true.

Por último, puedes configurar esto manualmente usando routeRules.

export default defineNuxtConfig({
  routeRules: {
    // Configura prerender a true para configurarlo para ser prerenderizado
    "/rss.xml": { prerender: true },
    // Configúralo a false para configurarlo para ser omitido en el prerenderizado
    "/this-DOES-NOT-get-prerendered": { prerender: false },
    // Todo bajo /blog se prerenderiza siempre que
    // esté enlazado desde otra página
    "/blog/**": { prerender: true },
  },
});

Como abreviatura, también puedes configurar esto en un archivo de página usando defineRouteRules.

<script setup>
// O configúralo a nivel de página
defineRouteRules({
  prerender: true,
});
</script>

<template>
  <div>
    <h1>Página de inicio</h1>
    <p>Pre-renderizada en el momento de la construcción</p>
  </div>
</template>

Esto se traducirá a:

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

Configuración de Prerender en Tiempo de Ejecución

prerenderRoutes

Puedes usar esto en tiempo de ejecución dentro de un contexto de Nuxt para agregar más rutas para que Nitro las prerenderice.

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

<template>
  <div>
    <h1>Esto registrará otras rutas para prerenderizar cuando se prerenderice</h1>
  </div>
</template>

Gancho prerender:routes de Nuxt

Esto se llama antes del prerenderizado para registrar rutas adicionales.

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 de Nitro

Esto se llama para cada ruta durante el prerenderizado. Puedes usar esto para un manejo detallado de cada ruta que se prerenderiza.

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