Enrutamiento

Astro usa enrutamiento basado en archivos para generar tus URLs de build basándose en el diseño de archivos del directorio src/pages/ de tu proyecto.

Navegar entre páginas

Astro usa elementos <a> HTML estándar para navegar entre rutas. No se proporciona ningún componente <Link> específico del framework.

<p>Read more <a href="/about/">about</a> Astro!</p>

<!-- With `base: "/docs"` configured -->
<p>Learn more in our <a href="/docs/reference/">reference</a> section!</p>

Rutas estáticas

Los componentes de página .astro así como los archivos Markdown y MDX (.md, .mdx) dentro del directorio src/pages/ se convierten automáticamente en páginas en tu sitio web. La ruta de cada página corresponde a su ruta y nombre de archivo dentro del directorio src/pages/.

# Example: Static routes
src/pages/index.astro        -> mysite.com/
src/pages/about.astro        -> mysite.com/about
src/pages/about/index.astro  -> mysite.com/about
src/pages/about/me.astro     -> mysite.com/about/me
src/pages/posts/1.md         -> mysite.com/posts/1

Rutas dinámicas

Un archivo de página de Astro puede especificar parámetros de ruta dinámicos en su nombre de archivo para generar múltiples páginas coincidentes. Por ejemplo, src/pages/authors/[author].astro genera una página de biografía para cada autor en tu blog. author se convierte en un parámetro al que puedes acceder desde dentro de la página.

En el modo de salida estático por defecto de Astro, estas páginas se generan en el momento del build, por lo que debes predeterminar la lista de authors que obtienen un archivo correspondiente. En modo SSR, se generará una página bajo petición para cualquier ruta que coincida.

Modo estático (SSG)

Como todas las rutas deben determinarse en el momento del build, una ruta dinámica debe exportar un getStaticPaths() que devuelva un array de objetos con una propiedad params. Cada uno de estos objetos generará una ruta correspondiente.

[dog].astro define el parámetro dinámico dog en su nombre de archivo, por lo que los objetos devueltos por getStaticPaths() deben incluir dog en sus params. La página puede entonces acceder a este parámetro usando Astro.params.

---
export function getStaticPaths() {
  return [
    { params: { dog: "clifford" }},
    { params: { dog: "rover" }},
    { params: { dog: "spot" }},
  ];
}

const { dog } = Astro.params;
---
<div>Good dog, {dog}!</div>

Esto generará tres páginas: /dogs/clifford, /dogs/rover, y /dogs/spot, cada una mostrando el nombre del perro correspondiente.

El nombre de archivo puede incluir múltiples parámetros, que deben todos incluirse en los objetos params en getStaticPaths():

---
export function getStaticPaths() {
  return [
    { params: { lang: "en", version: "v1" }},
    { params: { lang: "fr", version: "v2" }},
  ];
}

const { lang, version } = Astro.params;
---

Esto generará /en-v1/info y /fr-v2/info.

Los parámetros pueden incluirse en partes separadas de la ruta. Por ejemplo, el archivo src/pages/[lang]/[version]/info.astro con el mismo getStaticPaths() de arriba generará las rutas /en/v1/info y /fr/v2/info.

Decodificar `params`

Los params devueltos por una función getStaticPaths() no están decodificados. Usa decodeURI() cuando necesites decodificar los valores de los parámetros.

---
export function getStaticPaths() {
  return [
    { params: { slug: decodeURI("%5Bpage%5D") }}, // decodes to "[page]"
  ]
}
---

Aprende más sobre getStaticPaths().

Related recipe: Añadir características de i18n

Parámetros rest

Si necesitas más flexibilidad en tu enrutamiento de URL, puedes usar un parámetro rest ([...path]) en tu nombre de archivo .astro para coincidir con rutas de archivo de cualquier profundidad:

---
export function getStaticPaths() {
  return [
    { params: { path: "one/two/three" }},
    { params: { path: "four" }},
    { params: { path: undefined }}
  ]
}

const { path } = Astro.params;
---

Esto generará /sequences/one/two/three, /sequences/four, y /sequences. (Establecer el parámetro rest en undefined permite coincidir con la página de nivel superior.)

Los parámetros rest pueden usarse con otros parámetros nombrados. Por ejemplo, el visor de archivos de GitHub puede representarse con la siguiente ruta dinámica:

/[org]/[repo]/tree/[branch]/[...file]

En este ejemplo, una petición a /withastro/astro/tree/main/docs/public/favicon.svg se dividiría en los siguientes parámetros nombrados:

{
  org: "withastro",
  repo: "astro",
  branch: "main",
  file: "docs/public/favicon.svg"
}

Ejemplo: Páginas dinámicas en múltiples niveles

En el siguiente ejemplo, un parámetro rest ([...slug]) y la característica props de getStaticPaths() generan páginas para slugs de diferentes profundidades.

---
export function getStaticPaths() {
  const pages = [
    {
      slug: undefined,
      title: "Astro Store",
      text: "Welcome to the Astro store!",
    },
    {
      slug: "products",
      title: "Astro products",
      text: "We have lots of products for you",
    },
    {
      slug: "products/astro-handbook",
      title: "The ultimate Astro handbook",
      text: "If you want to learn Astro, you must read this book.",
    },
  ];

  return pages.map(({ slug, title, text }) => {
    return {
      params: { slug },
      props: { title, text },
    };
  });
}

const { title, text } = Astro.props;
---
<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>{text}</p>
  </body>
</html>

Rutas dinámicas bajo demanda

Para renderizado bajo demanda con un adaptador, las rutas dinámicas se definen de la misma manera: incluye corchetes [param] o [...path] en tus nombres de archivo para coincidir con strings o rutas arbitrarias. Pero como las rutas ya no se construyen con antelación, la página se servirá para cualquier ruta que coincida. Dado que estas no son rutas "estáticas", getStaticPaths no debería usarse.

Para rutas renderizadas bajo demanda, solo se puede usar un parámetro rest con la notación spread en el nombre del archivo (p. ej. src/pages/[locale]/[...slug].astro o src/pages/[...locale]/[slug].astro, pero no src/pages/[...locale]/[...slug].astro).

---
export const prerender = false; // Not needed in 'server' mode
const { resource, id } = Astro.params;
---
<h1>{resource}: {id}</h1>

Esta página se servirá para cualquier valor de resource e id: resources/users/1, resources/colors/blue, etc.

Modificar el ejemplo `[...slug]` para SSR

Como las páginas SSR no pueden usar getStaticPaths(), no pueden recibir props. El ejemplo anterior puede adaptarse para modo SSR buscando el valor del parámetro slug en un objeto. Si la ruta está en la raíz ("/"), el parámetro slug será undefined. Si el valor no existe en el objeto, redirigimos a una página 404.

---
const pages = [
  {
    slug: undefined,
    title: 'Astro Store',
    text: 'Welcome to the Astro store!',
  },
  {
    slug: 'products',
    title: 'Astro products',
    text: 'We have lots of products for you',
  },
  {
    slug: 'products/astro-handbook',
    title: 'The ultimate Astro handbook',
    text: 'If you want to learn Astro, you must read this book.',
  }
];

const { slug } = Astro.params;
const page = pages.find((page) => page.slug === slug);
if (!page) return Astro.redirect("/404");
const { title, text } = page;
---
<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>{text}</p>
  </body>
</html>

Redirecciones

A veces necesitarás redirigir a tus lectores a una nueva página, ya sea permanentemente porque la estructura de tu sitio ha cambiado o en respuesta a una acción como iniciar sesión en una ruta autenticada.

Puedes definir reglas para redirigir a usuarios a páginas movidas permanentemente en tu configuración de Astro. O redirigir a usuarios dinámicamente mientras usan tu sitio.

Redirecciones configuradas

Añadido en: astro@2.9.0

Puedes especificar un mapeo de redirecciones permanentes en tu configuración de Astro con el valor redirects.

Para redirecciones internas, esto es un mapeo de una ruta antigua a la nueva ruta. A partir de Astro v5.2.0, también es posible redirigir a URLs externas que comiencen con http o https y puedan parsearse:

import { defineConfig } from "astro/config";

export default defineConfig({
  redirects: {
    "/old-page": "/new-page",
    "/blog": "https://example.com/blog"
  }
});

Estas redirecciones siguen las mismas reglas de prioridad que las rutas basadas en archivos y siempre tendrán menor precedencia que un archivo de página existente con el mismo nombre en tu proyecto. Por ejemplo, /old-page no redirigirá a /new-page si tu proyecto contiene el archivo src/pages/old-page.astro.

Se permiten rutas dinámicas siempre que tanto la ruta nueva como la antigua contengan los mismos parámetros, por ejemplo:

{
  "/blog/[...slug]": "/articles/[...slug]"
}

Usando SSR o un adaptador estático, también puedes proporcionar un objeto como valor, permitiéndote especificar el código de status además del nuevo destination:

import { defineConfig } from "astro/config";

export default defineConfig({
  redirects: {
    "/old-page": {
      status: 302,
      destination: "/new-page"
    },
    "/news": {
      status: 302,
      destination: "https://example.com/news"
    }
  }
});

Al ejecutar astro build, Astro generará archivos HTML con la etiqueta meta refresh por defecto. Los adaptadores soportados escribirán en su lugar el archivo de configuración del host con las redirecciones.

El código de estado es 301 por defecto. Si se compila a archivos HTML el código de estado no es usado por el servidor.

Redirecciones dinámicas

En el objeto global Astro, el método Astro.redirect te permite redirigir a otra página dinámicamente. Podrías hacer esto después de comprobar si el usuario ha iniciado sesión obteniendo su sesión desde una cookie.

---
import { isLoggedIn } from "../utils";

const cookie = Astro.request.headers.get("cookie");

// If the user is not logged in, redirect them to the login page
if (!isLoggedIn(cookie)) {
  return Astro.redirect("/login");
}
---

Como Astro usa HTML streaming en el renderizado bajo demanda, las redirecciones deben hacerse a nivel de página, no dentro de componentes hijos.

Rewrites

Agregado en: astro@4.13.0

Un rewrite te permite servir una ruta diferente sin redirigir el navegador a una página diferente. El navegador mostrará la dirección original en la barra de URL, pero en su lugar mostrará el contenido de la URL proporcionada a Astro.rewrite().

Los rewrites pueden ser útiles para mostrar el mismo contenido en múltiples rutas (p. ej. /products/shoes/men/ y /products/men/shoes/) sin necesidad de mantener dos archivos de origen diferentes.

Los rewrites también son útiles para propósitos de SEO y experiencia de usuario. Te permiten mostrar contenido que de otro modo requeriría redirigir a tu visitante a una página diferente o devolvería un estado 404. Un uso común de los rewrites es mostrar el mismo contenido localizado para diferentes variantes de un idioma.

El siguiente ejemplo usa un rewrite para renderizar la versión /es/ de una página cuando se visita la ruta URL /es-CU/ (español cubano). Cuando un visitante navega a la URL /es-cu/articles/introduction, Astro renderizará el contenido generado por el archivo src/pages/es/articles/introduction.astro.

---
return Astro.rewrite("/es/articles/introduction");
---

Usa context.rewrite() en tus archivos de endpoint para re-enrutar a una página diferente:

export function GET(context) {
  if (!context.locals.allowed) {
    return context.rewrite("/");
  }
}

Si la URL pasada a Astro.rewrite() emite un error de runtime, Astro mostrará el error de overlay en desarrollo y devolverá un código de estado 500 en producción. Si la URL no existe en tu proyecto, se devolverá un código de estado 404.

Puedes crear intencionalmente un rewrite para renderizar tu página /404, por ejemplo para indicar que un producto en tu tienda de e-commerce ya no está disponible:

---
const { item } = Astro.params;

if (!itemExists(item)) {
  return Astro.rewrite("/404");
}
---

También puedes reescribir condicionalmente basándote en un estado de respuesta HTTP, por ejemplo para mostrar una determinada página de tu sitio al visitar una URL que no existe:

export const onRequest = async (context, next) => {
  const response = await next();
  if (response.status === 404) {
    return context.rewrite("/");
  }
  return response;
}

Antes de mostrar el contenido de la ruta de rewrite especificada, la función Astro.rewrite() desencadenará una nueva fase de renderizado completa. Esto re-ejecuta cualquier middleware para la nueva ruta/petición.

Consulta la referencia de la API Astro.rewrite() para más información.

Orden de prioridad de rutas

Es posible que múltiples rutas definidas intenten construir la misma ruta URL. Por ejemplo, todas estas rutas podrían construir /posts/create:

Directoriosrc/pages/
- […slug].astro
- Directorioposts/
  - create.astro
  - [page].astro
  - [pid].ts
  - […slug].astro

Astro necesita saber qué ruta debería usarse para construir la página. Para hacerlo, las ordena según las siguientes reglas en orden:

Rutas reservadas de Astro
Las rutas con más segmentos de ruta tendrán precedencia sobre rutas menos específicas. En el ejemplo anterior, todas las rutas bajo /posts/ tienen precedencia sobre /[...slug].astro en la raíz.
Las rutas estáticas sin parámetros de ruta tendrán precedencia sobre las rutas dinámicas. P. ej. /posts/create.astro tiene precedencia sobre todas las demás rutas del ejemplo.
Las rutas dinámicas que usan parámetros nombrados tienen precedencia sobre los parámetros rest. P. ej. /posts/[page].astro tiene precedencia sobre /posts/[...slug].astro.
Las rutas dinámicas pre-renderizadas tienen precedencia sobre las rutas dinámicas de servidor.
Los endpoints tienen precedencia sobre las páginas.
Las rutas basadas en archivos tienen precedencia sobre las redirecciones.
Si ninguna de las reglas anteriores decide el orden, las rutas se ordenan alfabéticamente basándose en el locale por defecto de tu instalación de Node.

Dado el ejemplo anterior, aquí hay algunos ejemplos de cómo las reglas coincidirán una URL solicitada con la ruta usada para construir el HTML:

pages/posts/create.astro - Construirá solo /posts/create
pages/posts/[pid].ts - Construirá /posts/abc, /posts/xyz, etc. Pero no /posts/create
pages/posts/[page].astro - Construirá /posts/1, /posts/2, etc. Pero no /posts/create, /posts/abc ni /posts/xyz
pages/posts/[...slug].astro - Construirá /posts/1/2, /posts/a/b/c, etc. Pero no /posts/create, /posts/1, /posts/abc, etc.
pages/[...slug].astro - Construirá /abc, /xyz, /abc/xyz, etc. Pero no /posts/create, /posts/1, /posts/abc, etc.

Rutas reservadas

Las rutas internas tienen prioridad sobre cualquier ruta definida por el usuario o por integraciones ya que son necesarias para que las características de Astro funcionen. Las siguientes son las rutas reservadas de Astro:

_astro/: Sirve todos los assets estáticos al cliente, incluyendo documentos CSS, scripts de cliente empaquetados, imágenes optimizadas, y cualquier asset de Vite.
_server_islands/: Sirve los componentes dinámicos diferidos en una server island.
_actions/: Sirve cualquier action definida.

Paginación

Astro soporta paginación integrada para grandes colecciones de datos que necesitan dividirse en múltiples páginas. Astro generará propiedades comunes de paginación, incluyendo URLs de página anterior/siguiente, número total de páginas, y más.

Los nombres de rutas paginadas deberían usar la misma sintaxis [bracket] que una ruta dinámica estándar. Por ejemplo, el nombre de archivo /astronauts/[page].astro generará rutas para /astronauts/1, /astronauts/2, etc, donde [page] es el número de página generado.

Puedes usar la función paginate() para generar estas páginas para un array de valores así:

---
export function getStaticPaths({ paginate }) {
  const astronautPages = [
    { astronaut: "Neil Armstrong" },
    { astronaut: "Buzz Aldrin" },
    { astronaut: "Sally Ride" },
    { astronaut: "John Glenn" },
  ];

  // Generate pages from our array of astronauts, with 2 to a page
  return paginate(astronautPages, { pageSize: 2 });
}
// All paginated data is passed on the "page" prop
const { page } = Astro.props;
---
<!-- Display the current page number. `Astro.params.page` can also be used! -->
<h1>Page {page.currentPage}</h1>
<ul>
  <!-- List the array of astronaut info -->
  {page.data.map(({ astronaut }) => <li>{astronaut}</li>)}
</ul>

Esto genera las siguientes páginas, con 2 elementos por página:

/astronauts/1 - Página 1: Muestra “Neil Armstrong” y “Buzz Aldrin”
/astronauts/2 - Página 2: Muestra “Sally Ride” y “John Glenn”

La prop `page`

Cuando usas la función paginate(), cada página recibirá sus datos vía una prop page. La prop page tiene muchas propiedades útiles que puedes usar para construir páginas y enlaces entre ellas:

interface Page<T = any> {
  /** array containing the page’s slice of data that you passed to the paginate() function */
  data: T[];
  /** metadata */
  /** the count of the first item on the page, starting from 0 */
  start: number;
  /** the count of the last item on the page, starting from 0 */
  end: number;
  /** total number of results */
  total: number;
  /** the current page number, starting from 1 */
  currentPage: number;
  /** number of items per page (default: 10) */
  size: number;
  /** number of last page */
  lastPage: number;
  url: {
    /** url of the current page */
    current: string;
    /** url of the previous page (if there is one) */
    prev: string | undefined;
    /** url of the next page (if there is one) */
    next: string | undefined;
    /** url of the first page (if the current page is not the first page) */
    first: string | undefined;
    /** url of the last page (if the current page in not the last page) */
    last: string | undefined;
  };
}

El siguiente ejemplo muestra información actual de la página junto con enlaces para navegar entre páginas:

---
// Paginate same list of `{ astronaut }` objects as the previous example
export function getStaticPaths({ paginate }) { /* ... */ }
const { page } = Astro.props;
---
<h1>Page {page.currentPage}</h1>
<ul>
  {page.data.map(({ astronaut }) => <li>{astronaut}</li>)}
</ul>
{page.url.first ? <a href={page.url.first}>First</a> : null}
{page.url.prev ? <a href={page.url.prev}>Previous</a> : null}
{page.url.next ? <a href={page.url.next}>Next</a> : null}
{page.url.last ? <a href={page.url.last}>Last</a> : null}

Aprende más sobre la prop page de paginación.

Paginación anidada

Un caso de uso más avanzado para la paginación es la paginación anidada. Esto es cuando la paginación se combina con otros parámetros de ruta dinámicos. Puedes usar paginación anidada para agrupar tu colección paginada por alguna propiedad o etiqueta.

Por ejemplo, si quieres agrupar tus posts de Markdown paginados por alguna etiqueta, usarías paginación anidada creando una página /src/pages/[tag]/[page].astro que coincidiría con las siguientes URLs:

/red/1 (tag=red)
/red/2 (tag=red)
/blue/1 (tag=blue)
/green/1 (tag=green)

La paginación anidada funciona devolviendo un array de resultados de paginate() desde getStaticPaths(), uno para cada agrupación.

En el siguiente ejemplo, implementaremos paginación anidada para construir las URLs listadas arriba:

---
export function getStaticPaths({ paginate }) {
  const allTags = ["red", "blue", "green"];
  const allPosts = Object.values(import.meta.glob("../pages/post/*.md", { eager: true }));
  // For every tag, return a `paginate()` result.
  // Make sure that you pass `{ params: { tag }}` to `paginate()`
  // so that Astro knows which tag grouping the result is for.
  return allTags.flatMap((tag) => {
    const filteredPosts = allPosts.filter((post) => post.frontmatter.tag === tag);
    return paginate(filteredPosts, {
      params: { tag },
      pageSize: 10
    });
  });
}

const { page } = Astro.props;
const params = Astro.params;

Excluir páginas

Puedes excluir páginas o directorios dentro de src/pages de ser construidos prefijando sus nombres con un guion bajo (_). Los archivos con el prefijo _ no serán reconocidos por el router y no se colocarán en el directorio dist/.

Puedes usar esto para deshabilitar páginas temporalmente, y también para poner tests, utilidades y componentes en la misma carpeta que sus páginas relacionadas.

En este ejemplo, solo src/pages/index.astro y src/pages/projects/project1.md se construirán como rutas de página y archivos HTML.

Directoriosrc/pages/
- Directorio_hidden-directory/
  - page1.md
  - page2.md
- _hidden-page.astro
- index.astro
- Directorioprojects/
  - _SomeComponent.astro
  - _utils.js
  - project1.md

Enrutamiento avanzado

Añadido en: astro@7.0.0 Nuevo

Por defecto, Astro maneja cada petición con un pipeline integrado que ejecuta los handlers en un orden fijo: normalización de trailing-slash, redirecciones, sesiones, actions, middleware de usuario, renderizado de páginas, i18n, y caché. Este pipeline está diseñado para cubrir los casos de uso más comunes para enrutamiento y manejo de peticiones, pero puede no ajustarse a las necesidades de cada proyecto.

El enrutamiento avanzado de Astro te permite reemplazar este pipeline con el tuyo propio. Puedes elegir qué características integradas usar y dónde usarlas. También puedes añadir tu propia lógica personalizada en cualquier parte del pipeline. Esto te da control total sobre cómo Astro maneja las peticiones entrantes.

Crear un entrypoint personalizado

Cuando el pipeline por defecto no se ajusta a tus necesidades, puedes sobrescribirlo creando un archivo src/fetch.ts que exporte por defecto un objeto con un método fetch(). Este método recibe una Request estándar y debe devolver una Response.

import type { Fetchable } from 'astro';

export default {
  async fetch(request) {
    // Your custom request handling logic here
    return new Response("Hello from advanced routing!");
  }
} satisfies Fetchable;

Astro soporta varios formatos de archivo para su entrypoint de enrutamiento avanzado: .ts, .js, .mjs, y .mts. Recomendamos usar .js en la mayoría de los casos o .ts si necesitas soporte de TypeScript.

Cambiar el nombre del archivo entrypoint

Por defecto, Astro busca src/fetch.ts como entrypoint de enrutamiento avanzado. Puedes cambiar esto estableciendo la opción fetchFile en tu archivo de configuración de Astro.

El siguiente ejemplo le dice a Astro que busque src/handler.ts en lugar de src/fetch.ts:

import { defineConfig } from 'astro/config';

export default defineConfig({
  fetchFile: 'handler',
});

Establece fetchFile en null para deshabilitar el entrypoint completamente. Esto es útil si ya tienes un archivo src/fetch.ts usado para otros propósitos:

import { defineConfig } from 'astro/config';

export default defineConfig({
  fetchFile: null,
});

Añadir lógica personalizada

El principal beneficio del enrutamiento avanzado es la capacidad de insertar lógica personalizada en el pipeline de peticiones. Puedes ejecutar código antes de que Astro toque la petición, entre fases del pipeline, o después de que se produzca la respuesta.

Puedes hacer esto de dos maneras:

Usa el handler astro() para ejecutar el pipeline integrado completo, y añadir lógica antes o después.
Compón handlers individuales desde astro/fetch o astro/hono para más control sobre el orden de ejecución.

Ejecutar el pipeline completo con `astro()`

Usa astro() cuando quieras mantener el comportamiento de enrutamiento integrado de Astro, pero necesites lógica personalizada alrededor. Este enfoque preserva el orden del pipeline por defecto y te permite añadir pre-procesamiento y post-procesamiento en un solo lugar. Para muchos casos de uso, como añadir auth guards, logging de peticiones, y encabezados personalizados, astro() es todo lo que necesitas.

El siguiente ejemplo comprueba si un usuario puede acceder a un dashboard antes de ejecutar el pipeline de Astro, y añade un encabezado personalizado a la respuesta una vez que Astro ha terminado de ejecutarse:

import { FetchState, astro } from 'astro/fetch';

export default {
  async fetch(request: Request): Promise<Response> {
    const state = new FetchState(request);

    // Custom pre-processing, runs before any Astro handler
    const url = new URL(request.url);
    if (url.pathname.startsWith('/dashboard')) {
      const cookie = request.headers.get('cookie') ?? '';
      if (!cookie.includes('session=')) {
        return new Response(null, {
          status: 302,
          headers: { Location: '/login' },
        });
      }
    }

    const response = await astro(state);

    // Custom post-processing, runs after Astro renders
    response.headers.set('X-Powered-By', 'Astro');
    return response;
  },
};

Componer handlers individuales

Cuando necesitas más control sobre el orden de ejecución del pipeline, o quieres omitir ciertas características, puedes componer funciones de handler individuales desde astro/fetch. Cada handler opera sobre un objeto FetchState que rastrea datos por petición, como la ruta coincidente, cookies, y sesión. Puedes llamar a los handlers en cualquier orden e insertar lógica personalizada entre fases.

El siguiente ejemplo ejecuta solo los handlers usados en el proyecto y añade lógica personalizada después de actions y antes del renderizado de páginas:

import {
  FetchState,
  actions,
  middleware,
  pages,
  i18n,
} from 'astro/fetch';

export default {
  async fetch(request: Request): Promise<Response> {
    const state = new FetchState(request);

    const actionResponse = await actions(state);
    if (actionResponse) return actionResponse;

    // Custom logic between actions and page rendering
    console.log(`Rendering ${new URL(request.url).pathname}`);

    const response = await middleware(state, (s) => pages(s));
    return i18n(state, response);
  },
};

Uso con Hono

Astro también proporciona wrappers compatibles con Hono para todas las funciones de handler vía astro/hono. Si prefieres usar Hono como tu framework de enrutamiento, puedes exportar una app de Hono desde src/fetch.ts:

import { Hono } from 'hono';
import { logger } from 'hono/logger';
import { actions, middleware, pages, i18n } from 'astro/hono';

const app = new Hono();

// Hono middleware
app.use(logger());

// Astro handlers (as Hono middleware)
app.use(actions());
app.use(middleware());
app.use(pages());
app.use(i18n());

export default app;

Contribuir Comunidad Patrocinar