Construyendo sitios estáticos

Analog soporta la generación de sitios estáticos cuando se construye para el despliegue. Esto incluye prerenderizar las rutas proporcionadas a ficheros HTML estáticos junto con la aplicación del lado del cliente.

Generación de sitios estáticos

Para prerrenderizar páginas, usa la propiedad prerender para configurar las rutas que se renderizarán en el momento de la construcción. Las rutas a prerrenderizar también se pueden proporcionar de forma asíncrona.

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    analog({
      prerender: {
        routes: async () => [
          '/',
          '/about',
          '/blog',
          '/blog/posts/2023-02-01-my-first-post',
        ],
      },
    }),
  ],
}));

Para solo prerrenderizar las páginas estáticas, usa la bandera static: true.

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    analog({
      static: true,
      prerender: {
        routes: async () => [
          '/',
          '/about',
          '/blog',
          '/blog/posts/2023-02-01-my-first-post',
        ],
      },
    }),
  ],
}));

Las páginas estáticas se pueden desplegar desde el directorio dist/analog/public.

Generación de Sitemap

Analog también soporta la generación automática de sitemap. Analog genera un sitemap en el directorio dist/analog/public al ejecutar una compilación si se proporciona una configuración de sitemap.

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    analog({
      prerender: {
        routes: async () => ['/', '/blog'],
        sitemap: {
          host: 'https://analogjs.org/',
        },
      },
    }),
  ],
}));

Siempre que se proporcionen rutas, Analog genera un fichero sitemap.xml que contiene un mapeo de las propiedades <loc> y <lastmod> de las páginas.

<?xml version="1.0" encoding="UTF-8"?>
<urlset...>
    <!--This file was automatically generated by Analog.-->
    <url>
        <loc>https://analogjs.org/</loc>
        <lastmod>2023-07-01</lastmod>
    </url>
    <url>
        <loc>https://analogjs.org/blog</loc>
        <lastmod>2023-07-01</lastmod>
    </url>
</urlset...>