Contexto de renderizado de Astro

Al renderizar una página, Astro proporciona una API de runtime específica para el renderizado actual. Esto incluye información útil como la URL de la página actual así como APIs para realizar acciones como redirigir a otra página.

En los componentes .astro, este contexto está disponible desde el objeto global Astro. Las funciones de endpoint también son llamadas con este mismo objeto de contexto como su primer argumento, cuyas propiedades reflejan las propiedades globales de Astro.

Algunas propiedades solo están disponibles para rutas renderizadas on-demand o pueden tener funcionalidad limitada en páginas prerenderizadas.

El objeto global Astro está disponible para todos los archivos .astro. Usa el objeto context en las funciones de endpoint para servir endpoints estáticos o en vivo del servidor y en el middleware para inyectar comportamiento cuando una página o endpoint está a punto de ser renderizado.

El objeto context

Las siguientes propiedades están disponibles en el global Astro (ej. Astro.props, Astro.redirect()) y también están disponibles en el objeto context (ej. context.props, context.redirect()) pasado a las funciones de endpoint y middleware.

`props`

props es un objeto que contiene cualquier valor que haya sido pasado como atributos de componente.

---
const { title, date } = Astro.props;
---
<div>
  <h1>{title}</h1>
  <p>{date}</p>
</div>

---
import Heading from '../components/Heading.astro';
---
<Heading title="My First Post" date="09 Aug 2022" />

Aprende más sobre cómo los layouts de Markdown y MDX manejan props.

El objeto props también contiene cualquier prop pasada desde getStaticPaths() al renderizar rutas estáticas.

Astro.props
context.props

---
export function getStaticPaths() {
  return [
    { params: { id: '1' }, props: { author: 'Blu' } },
    { params: { id: '2' }, props: { author: 'Erika' } },
    { params: { id: '3' }, props: { author: 'Matthew' } }
  ];
}

const { id } = Astro.params;
const { author } = Astro.props;
---

import type { APIContext } from 'astro';

export function getStaticPaths() {
  return [
    { params: { id: '1' }, props: { author: 'Blu' } },
    { params: { id: '2' }, props: { author: 'Erika' } },
    { params: { id: '3' }, props: { author: 'Matthew' } }
  ];
}

export function GET({ props }: APIContext) {
  return new Response(
    JSON.stringify({ author: props.author }),
  );
}

Ver también: Paso de datos con props

`params`

params es un objeto que contiene los valores de los segmentos de ruta dinámica coincidentes para una petición. Sus claves deben coincidir con los parámetros en la ruta del archivo de página o endpoint.

En builds estáticos, estos serán los params devueltos por getStaticPaths() usados para prerenderizar rutas dinámicas:

Astro.params
context.params

---
export function getStaticPaths() {
  return [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } }
  ];
}
const { id } = Astro.params;
---
<h1>{id}</h1>

import type { APIContext } from 'astro';

export function getStaticPaths() {
  return [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } }
  ];
}

export function GET({ params }: APIContext) {
  return new Response(
    JSON.stringify({ id: params.id }),
  );
}

Cuando las rutas se renderizan on-demand, params puede ser cualquier valor que coincida con los segmentos de ruta en el patrón de ruta dinámica.

---
import { getPost } from '../api';

const post = await getPost(Astro.params.id);

// No posts found with this ID
if (!post) {
  return Astro.redirect("/404")
}
---
<html>
  <h1>{post.name}</h1>
</html>

Ver también: params

`url`

Type: URL

Añadido en: astro@1.0.0

url es un objeto URL construido a partir del valor actual de request.url. Es útil para interactuar con propiedades individuales de la URL de la petición, como pathname y origin.

Astro.url es equivalente a hacer new URL(Astro.request.url).

url será una URL de localhost en modo dev. Al construir un sitio, las rutas prerenderizadas recibirán una URL basada en las opciones de site y base. Si site no está configurado, las páginas prerenderizadas también recibirán una URL de localhost durante los builds.

<h1>The current URL is: {Astro.url}</h1>
<h1>The current URL pathname is: {Astro.url.pathname}</h1>
<h1>The current URL origin is: {Astro.url.origin}</h1>

También puedes usar url para crear nuevas URLs pasándolo como argumento a new URL().

---
// Example: Construct a canonical URL using your production domain
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
// Example: Construct a URL for SEO meta tags using your current domain
const socialImageURL = new URL('/images/preview.png', Astro.url);
---
<link rel="canonical" href={canonicalURL} />
<meta property="og:image" content={socialImageURL} />

`site`

Type: URL | undefined

site devuelve una URL creada a partir de site en tu configuración de Astro. Devuelve undefined si no has establecido un valor para site en tu configuración de Astro.

<link
    rel="alternate"
    type="application/rss+xml"
    title="Your Site's Title"
    href={new URL("rss.xml", Astro.site)}
/>

`clientAddress`

Type: string

Añadido en: astro@1.0.0

clientAddress especifica la dirección IP de la petición. Esta propiedad solo está disponible para rutas renderizadas on-demand y no puede usarse en páginas prerenderizadas.

Astro.clientAddress
context.clientAddress

---
export const prerender = false; // Not needed in 'server' mode
---

<div>Your IP address is: <span class="address">{Astro.clientAddress}</span></div>

export const prerender = false; // Not needed in 'server' mode
import type { APIContext } from 'astro';

export function GET({ clientAddress }: APIContext) {
  return new Response(`Your IP address is: ${clientAddress}`);
}

`isPrerendered`

Type: boolean

Añadido en: astro@5.0.0

Un booleano que representa si la página actual está prerenderizada o no.

Puedes usar esta propiedad para ejecutar lógica condicional en el middleware, por ejemplo, para evitar acceder a headers en páginas prerenderizadas.

`generator`

Type: string

Añadido en: astro@1.0.0

generator proporciona la versión actual de Astro que tu proyecto está ejecutando. Esta es una forma conveniente de añadir una etiqueta <meta name="generator"> con tu versión actual de Astro. Sigue el formato "Astro v5.x.x".

Astro.generator
context.generator

<html>
  <head>
    <meta name="generator" content={Astro.generator} />
  </head>
  <body>
    <footer>
      <p>Built with <a href="https://astro.build">{Astro.generator}</a></p>
    </footer>
  </body>
</html>

import type { APIContext } from 'astro';

export function GET({ generator, site }: APIContext) {
  const body = JSON.stringify({ generator, site });
  return new Response(body);
}

`request`

Type: Request

request es un objeto Request estándar. Puede usarse para obtener la url, los headers, el method, e incluso el body de la petición.

Astro.request
context.request

<p>Received a {Astro.request.method} request to "{Astro.request.url}".</p>
<p>Received request headers:</p>
<p><code>{JSON.stringify(Object.fromEntries(Astro.request.headers))}</code></p>

import type { APIContext } from 'astro';

export function GET({ request }: APIContext) {
  return new Response(`Hello ${request.url}`);
}

`response`

Type: ResponseInit & { readonly headers: Headers }

response es un objeto ResponseInit estándar. Tiene la siguiente estructura.

status: El código de estado numérico de la respuesta, ej., 200.
statusText: El mensaje de estado asociado con el código de estado, ej., 'OK'.
headers: Una instancia de Headers que puedes usar para establecer los HTTP headers de la respuesta.

Astro.response se usa para establecer el status, statusText, y los headers de la respuesta de una página.

---
if (condition) {
  Astro.response.status = 404;
  Astro.response.statusText = 'Not found';
}
---

O para establecer un header:

---
Astro.response.headers.set('Set-Cookie', 'a=b; Path=/;');
---

`redirect()`

Type: (path: string, status?: number) => Response

Añadido en: astro@1.5.0

redirect() devuelve un objeto Response que te permite redirigir a otra página, y opcionalmente proporcionar un código de estado de respuesta HTTP como segundo parámetro.

Una página (y no un componente hijo) debe return el resultado de Astro.redirect() para que la redirección ocurra.

Para rutas generadas estáticamente, esto producirá una redirección de cliente usando una etiqueta <meta http-equiv="refresh"> y no soporta códigos de estado.

Para rutas renderizadas on-demand, se soporta establecer un código de estado personalizado al redirigir. Si no se especifica, las redirecciones se servirán con un código de estado 302.

El siguiente ejemplo redirige a un usuario a una página de login:

Astro.redirect()
context.redirect()

---
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');
}
---

<p>User information</p>

import type { APIContext } from 'astro';

export function GET({ redirect, request }: APIContext) {
  const cookie = request.headers.get('cookie');
  if (!isLoggedIn(cookie)) {
    return redirect('/login', 302);
  } else {
    // return user information
  }
}

`rewrite()`

Type: (rewritePayload: string | URL | Request) => Promise<Response>

Agregado en: astro@4.13.0

rewrite() te permite servir contenido desde una URL o ruta diferente sin redirigir el navegador a una nueva página.

El método acepta un string, una URL, o un Request para la ubicación de la ruta.

Usa un string para proporcionar una ruta explícita:

Astro.rewrite()
context.rewrite()

---
return Astro.rewrite("/login")
---

import type { APIContext } from 'astro';

export function GET({ rewrite }: APIContext) {
  return rewrite('/login');
}

Usa un tipo URL cuando necesites construir la ruta URL para el rewrite. El siguiente ejemplo renderiza la ruta padre de una página creando una nueva URL desde la ruta relativa "../":

Astro.rewrite()
context.rewrite()

---
return Astro.rewrite(new URL("../", Astro.url))
---

import type { APIContext } from 'astro';

export function GET({ rewrite }: APIContext) {
  return rewrite(new URL("../", Astro.url));
}

Usa un tipo Request para control completo del Request enviado al servidor para la nueva ruta. El siguiente ejemplo envía una petición para renderizar la página padre proporcionando también headers:

Astro.rewrite()
context.rewrite()

---
return Astro.rewrite(new Request(new URL("../", Astro.url), {
  headers: {
    "x-custom-header": JSON.stringify(Astro.locals.someValue)
  }
}))
---

import type { APIContext } from 'astro';

export function GET({ rewrite }: APIContext) {
  return rewrite(new Request(new URL("../", Astro.url), {
    headers: {
      "x-custom-header": JSON.stringify(Astro.locals.someValue)
    }
  }));
}

`originPathname`

Type: string

Añadido en: astro@5.0.0

originPathname define el pathname original de la petición, antes de que se aplicaran los rewrites.

Astro.originPathname
context.originPathname

<p>The origin path is {Astro.originPathname}</p>
<p>The rewritten path is {Astro.url.pathname}</p>

import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware(async (context, next) => {
  // Record the original pathname before any rewrites
  recordPageVisit(context.originPathname);
  return next();
});

`locals`

Añadido en: astro@2.4.0

locals es un objeto usado para almacenar y acceder a información arbitraria durante el ciclo de vida de una petición. Astro.locals es un objeto que contiene cualquier valor del objeto context.locals establecido por el middleware. Úsalo para acceder a datos devueltos por el middleware en tus archivos .astro.

Las funciones de middleware pueden tanto leer como escribir los valores de context.locals:

import type { MiddlewareHandler } from 'astro';

export const onRequest: MiddlewareHandler = ({ locals }, next) => {
  if (!locals.title) {
    locals.title = "Default Title";
  }
  return next();
}

Los componentes de Astro y los API endpoints pueden leer valores de locals cuando se renderizan:

Astro.locals
context.locals

---
const title = Astro.locals.title;
---
<h1>{title}</h1>

import type { APIContext } from 'astro';

export function GET({ locals }: APIContext) {
  return new Response(locals.title); // "Default Title"
}

`preferredLocale`

Type: string | undefined

Añadido en: astro@3.5.0

preferredLocale es un valor calculado para encontrar la mejor coincidencia entre las preferencias de idioma del navegador de tu visitante y los locales soportados por tu sitio.

Se calcula verificando los locales configurados en tu array i18n.locales y los locales soportados por el navegador del usuario vía el header Accept-Language. Este valor es undefined si no existe tal coincidencia.

Esta propiedad solo está disponible para rutas renderizadas on-demand y no puede usarse en páginas prerenderizadas estáticas.

`preferredLocaleList`

Type: string[] | undefined

Añadido en: astro@3.5.0

preferredLocaleList representa el array de todos los locales que son tanto solicitados por el navegador como soportados por tu sitio web. Esto produce una lista de todos los idiomas compatibles entre tu sitio y tu visitante.

Si ninguno de los idiomas solicitados por el navegador se encuentra en tu array de locales, entonces el valor es []. Esto ocurre cuando no soportas ninguno de los locales preferidos de tu visitante.

Si el navegador no especifica ningún idioma preferido, entonces este valor será i18n.locales: todos tus locales soportados serán considerados igualmente preferidos por un visitante sin preferencias.

Esta propiedad solo está disponible para rutas renderizadas on-demand y no puede usarse en páginas prerenderizadas estáticas.

`currentLocale`

Type: string | undefined

Añadido en: astro@3.5.6

El locale calculado a partir de la URL actual, usando la sintaxis especificada en tu configuración de locales. Si la URL no contiene un prefijo /[locale]/, entonces el valor por defecto será i18n.defaultLocale.

`getActionResult()`

Type: (action: TAction) => ActionReturnType<TAction> | undefined

Añadido en: astro@4.15.0

getActionResult() es una función que devuelve el resultado del envío de una Action. Esta acepta una función action como argumento (ej. actions.logout) y devuelve un objeto data o error cuando se recibe un envío. De lo contrario, devolverá undefined.

---
import { actions } from 'astro:actions';

const result = Astro.getActionResult(actions.logout);
---

<form action={actions.logout}>
  <button type="submit">Log out</button>
</form>
{result?.error && <p>Failed to log out. Please try again.</p>}

`callAction()`

Añadido en: astro@4.15.0

callAction() es una función usada para llamar a un Action handler directamente desde tu componente de Astro. Esta función acepta una función Action como primer argumento (ej. actions.logout) y cualquier input que esa action reciba como segundo argumento. Devuelve el resultado de la action como una promise.

---
import { actions } from 'astro:actions';

const { data, error } = await Astro.callAction(actions.logout, { userId: '123' });
---

`routePattern`

Type: string

Añadido en: astro@5.0.0

El patrón de ruta responsable de generar la página o ruta actual. En el enrutamiento basado en archivos, esto se asemeja a la ruta del archivo en tu proyecto usada para crear la ruta. Cuando las integraciones crean rutas para tu proyecto, context.routePattern es idéntico al valor de injectRoute.pattern.

El valor comenzará con una barra inicial y se parecerá a la ruta de un componente de página relativa a tu carpeta src/pages/ sin extensión de archivo.

Por ejemplo, el archivo src/pages/en/blog/[slug].astro devolverá /en/blog/[slug] para routePattern. Cada página en tu sitio generada por ese archivo (ej. /en/blog/post-1/, /en/blog/post-2/, etc.) comparte el mismo valor para routePattern. En el caso de rutas index.*, el patrón de ruta no incluirá la palabra “index.” Por ejemplo, src/pages/index.astro devolverá /.

Puedes usar esta propiedad para entender qué ruta está renderizando tu componente. Esto te permite agrupar o analizar URLs de páginas generadas de manera similar. Por ejemplo, puedes usarlo para renderizar condicionalmente cierta información, o recopilar métricas sobre qué rutas son más lentas.

`cookies`

Type: AstroCookies

Añadido en: astro@1.4.0

cookies contiene utilidades para leer y manipular cookies para rutas renderizadas on-demand.

`cookies.get()`

Type: (key: string, options?: AstroCookieGetOptions) => AstroCookie | undefined

Obtiene la cookie como un objeto AstroCookie, que contiene el value y funciones utilitarias para convertir la cookie a tipos no-string.

`cookies.has()`

Type: (key: string, options?: AstroCookieGetOptions) => boolean

Si esta cookie existe. Si la cookie ha sido establecida vía Astro.cookies.set() esto devolverá true, de lo contrario, verificará las cookies en el Astro.request.

`cookies.set()`

Type: (key: string, value: string | object, options?: AstroCookieSetOptions) => void

Establece la cookie key al valor dado. Esto intentará convertir el valor de la cookie a un string. Las options proporcionan formas de establecer características de cookies, como el maxAge o httpOnly.

`cookies.delete()`

Type: (key: string, options?: AstroCookieDeleteOptions) => void

Invalida una cookie estableciendo la fecha de expiración en el pasado (0 en tiempo Unix).

Una vez que una cookie es “eliminada” (expirada), Astro.cookies.has() devolverá false y Astro.cookies.get() devolverá un AstroCookie con un value de undefined. Las options disponibles al eliminar una cookie son: domain, path, httpOnly, sameSite, y secure.

`cookies.merge()`

Type: (cookies: AstroCookies) => void

Fusiona una nueva instancia de AstroCookies en la instancia actual. Cualquier cookie nueva será añadida a la instancia actual y cualquier cookie con el mismo nombre sobrescribirá los valores existentes.

`cookies.headers()`

Type: () => Iterator<string>

Obtiene los valores de header para Set-Cookie que se enviarán con la respuesta.

`cookies.consume()`

Type: () => Iterator<string>

Añadido en: astro@6.3.0

Marca las cookies como consumidas y devuelve los valores de header Set-Cookie, similar a cookies.headers(). Después de llamar a consume(), cualquier llamada subsiguiente a cookies.set() registrará una advertencia, ya que los headers de cookies ya han sido enviados al navegador. Esto es usado internamente por los adapters para asegurar que las cookies solo se serialicen una vez en la respuesta.

Tipo `AstroCookie`

El tipo devuelto al obtener una cookie vía Astro.cookies.get(). Tiene las siguientes propiedades:

`AstroCookie.value`

Type: string

El valor en string crudo de la cookie.

`AstroCookie.json()`

Type: () => Record<string, any>

Parsea el valor de la cookie vía JSON.parse(), devolviendo un objeto. Lanza un error si el valor de la cookie no es JSON válido.

`AstroCookie.number()`

Type: () => number

Parsea el valor de la cookie como un Number. Devuelve NaN si no es un número válido.

`AstroCookie.boolean()`

Type: () => boolean

Convierte el valor de la cookie a un booleano.

`AstroCookieGetOptions`

Añadido en: astro@4.1.0

La interfaz AstroCookieGetOption te permite especificar options cuando obtienes una cookie.

`AstroCookieGetOptions.decode()`

Type: (value: string) => string

Permite personalizar cómo se deserializa una cookie en un valor.

`AstroCookieSetOptions`

Añadido en: astro@4.1.0

AstroCookieSetOptions es un objeto que puede pasarse a Astro.cookies.set() al establecer una cookie para personalizar cómo se serializa la cookie.

`AstroCookieSetOptions.domain`

Type: string

Especifica el dominio. Si no se establece ningún dominio, la mayoría de los clientes interpretarán que aplica al dominio actual.

`AstroCookieSetOptions.expires`

Type: Date

Especifica la fecha en la que la cookie expirará.

`AstroCookieSetOptions.httpOnly`

Type: boolean

Si es true, la cookie no será accesible del lado del cliente.

`AstroCookieSetOptions.maxAge`

Type: number

Especifica un número, en segundos, durante el cual la cookie es válida.

`AstroCookieSetOptions.path`

Type: string

Especifica un subpath del dominio en el que se aplica la cookie.

`AstroCookieSetOptions.partitioned`

Type: boolean

Añadido en: astro@5.17.0

Si es true, la cookie es una cookie particionada. Las cookies particionadas solo pueden leerse dentro del contexto del sitio de nivel superior en el que fueron establecidas, lo que permite bloquear el rastreo cross-site mientras se habilitan usos legítimos de cookies de terceros.

Las cookies particionadas deben establecerse con secure: true.

`AstroCookieSetOptions.sameSite`

Type: boolean | 'lax' | 'none' | 'strict'

Especifica el valor del header de cookie SameSite.

`AstroCookieSetOptions.secure`

Type: boolean

Si es true, la cookie solo se establece en sitios https.

`AstroCookieSetOptions.encode()`

Type: (value: string) => string

Permite personalizar cómo se serializa la cookie.

`session`

Type: AstroSession

Añadido en: astro@5.7.0

session es un objeto que permite almacenar datos entre peticiones para rutas renderizadas on-demand. Está asociado con una cookie que contiene solo el ID de sesión: los datos en sí no se almacenan en la cookie.

La sesión se crea cuando se usa por primera vez, y la cookie de sesión se establece automáticamente. El objeto session es undefined si no se ha configurado ningún session storage, o si la ruta actual está prerenderizada, y registrará un error si intentas usarlo.

Consulta la guía de sesiones para más información sobre cómo usar sesiones en tu proyecto de Astro.

`session.get()`

Type: (key: string) => Promise<any>

Devuelve el valor de la clave dada en la sesión. Si la clave no existe, devuelve undefined.

Astro.session
context.session

---
const cart = await Astro.session?.get('cart');
---
<button>🛒 {cart?.length}</button>

import type { APIContext } from 'astro';

export async function GET({ session }: APIContext) {
  const cart = await session.get('cart');
  return Response.json({ cart });
}

`session.set()`

Type: (key: string, value: any, options?: { ttl: number }) => void

Establece el valor de la clave dada en la sesión. El valor puede ser cualquier tipo serializable. Este método es sincrónico y el valor está inmediatamente disponible para su recuperación, pero no se guarda en el backend hasta el final de la petición. La option ttl establece el tiempo de expiración del valor, en segundos.

Astro.session
context.session

---
const { slug } = Astro.params;
Astro.session?.set('lastViewedProduct', slug);
---

import type { APIContext } from 'astro';

export async function POST({ session, request }: APIContext) {
  const cart = await session.get('cart');
  const newItem = await request.json();
  cart.push(newItem);
  // Save the updated cart to the session
  session.set('cart', cart);
  return Response.json({ cart });
}

`session.regenerate()`

Type: () => void

Regenera el ID de sesión. Llama a esto cuando un usuario inicia sesión o escala sus privilegios, para prevenir ataques de session fixation.

Astro.session
context.session

---
Astro.session?.regenerate();
---

import type { APIContext } from 'astro';

export async function POST({ session }: APIContext) {
  // Authenticate the user...
  doLogin();
  // Regenerate the session ID to prevent session fixation attacks
  session.regenerate();
  return Response.json({ success: true });
}

`session.destroy()`

Type: () => void

Destruye la sesión, eliminando la cookie y el objeto del backend. Llama a esto cuando un usuario cierra sesión o su sesión se invalida de otra manera.

Astro.session
context.session

---
Astro.session?.destroy();
return Astro.redirect('/login');
---

import type { APIContext } from 'astro';

export async function POST({ session }: APIContext) {
  session.destroy();
  return Response.json({ success: true });
}

`session.load()`

Type: (id: string) => Promise<void>

Carga una sesión por ID. En uso normal, una sesión se carga automáticamente desde la cookie de la petición. Usa este método para cargar una sesión desde un ID diferente. Esto es útil si estás manejando el ID de sesión tú mismo, o si quieres rastrear una sesión sin usar cookies.

Astro.session
context.session

---
// Load the session from a header instead of cookies
const sessionId = Astro.request.headers.get('x-session-id');
await Astro.session?.load(sessionId);
const cart = await Astro.session?.get('cart');
---
<h1>Your cart</h1>
<ul>
  {cart?.map((item) => (
    <li>{item.name}</li>
  ))}
</ul>

import type { APIRoute } from 'astro';

export const GET: APIRoute = async ({ session, request }) => {
  // Load the session from a header instead of cookies
  const sessionId = request.headers.get('x-session-id');
  await session.load(sessionId);
  const cart = await session.get('cart');
  return Response.json({ cart });
};

`csp`

Type: object | undefined

Añadido en: astro@6.0.0

Las APIs de runtime de CSP de Astro habilitan el soporte para Content Security Policy (CSP) para ayudar a minimizar ciertos tipos de amenazas de seguridad controlando qué recursos puede cargar un documento. Esto proporciona protección adicional contra ataques de cross-site scripting (XSS).

Puedes personalizar el elemento <meta> por página desde el global Astro dentro de componentes .astro, o el tipo APIContext en endpoints y middleware.

Cuando los recursos se insertan múltiples veces o desde múltiples fuentes (ej. definidos en tu config de csp y añadidos usando las siguientes APIs de runtime de CSP, Astro fusionará y desduplicará todos los recursos para crear tu elemento <meta>.

`csp.insertDirective()`

Type: (directive: CspDirective) => void

Añadido en: astro@6.0.0

Añade una única directiva a la página actual. Puedes llamar a este método múltiples veces para añadir directivas adicionales.

---
Astro.csp?.insertDirective("default-src 'self'");
Astro.csp?.insertDirective("img-src 'self' https://images.cdn.example.com");
---

Después del build, el elemento <meta> para esta página individual incorporará tus directivas adicionales junto a las directivas existentes de script-src y style-src:

<meta
http-equiv="content-security-policy"
content="
  default-src 'self';
  img-src 'self' https://images.cdn.example.com;
  script-src 'self' 'sha256-somehash';
  style-src 'self' 'sha256-somehash';
  "
>

`csp.insertStyleResource()`

Type: (resource: string) => void

Añadido en: astro@6.0.0

Inserta un nuevo recurso para ser usado en la directiva style-src.

---
Astro.csp?.insertStyleResource("https://styles.cdn.example.com");
---

Después del build, el elemento <meta> para esta página individual añadirá tu source a la directiva por defecto style-src:

<meta
http-equiv="content-security-policy"
content="
  script-src 'self' 'sha256-somehash';
  style-src https://styles.cdn.example.com 'sha256-somehash';
  "
>

`csp.insertStyleHash()`

Type: (hash: CspHash) => void

Añadido en: astro@6.0.0

Añade un nuevo hash a la directiva style-src.

---
Astro.csp?.insertStyleHash("sha512-styleHash");
---

Después del build, el elemento <meta> para esta página individual añadirá tu hash a la directiva por defecto style-src:

<meta
http-equiv="content-security-policy"
content="
  script-src 'self' 'sha256-somehash';
  style-src 'self' 'sha256-somehash' 'sha512-styleHash';
  "
>

`csp.insertScriptResource()`

Type: (resource: string) => void

Añadido en: astro@6.0.0

Inserta un nuevo source válido para ser usado en la directiva script-src.

---
Astro.csp?.insertScriptResource("https://scripts.cdn.example.com");
---

Después del build, el elemento <meta> para esta página individual añadirá tu source a la directiva por defecto script-src:

<meta
http-equiv="content-security-policy"
content="
  script-src https://scripts.cdn.example.com 'sha256-somehash';
  style-src 'self' 'sha256-somehash';
  "
>

`csp.insertScriptHash()`

Type: (hash: CspHash) => void

Añadido en: astro@6.0.0

Añade un nuevo hash a la directiva script-src.

---
Astro.csp?.insertScriptHash("sha512-scriptHash");
---

Después del build, el elemento <meta> para esta página individual añadirá tu hash a la directiva por defecto script-src:

<meta
http-equiv="content-security-policy"
content="
  script-src 'self' 'sha256-somehash' 'sha512-styleHash';
  style-src 'self' 'sha256-somehash';
  "
>

`cache`

Type: object | undefined

Añadido en: astro@7.0.0 Nuevo

Contiene utilidades para gestionar el comportamiento de caching para páginas y endpoints renderizados on-demand.

Consulta la guía de caching para más información sobre cómo usar caching en tu proyecto de Astro.

`cache.enabled`

Type: boolean

Si el caching está activo. Devuelve false cuando no hay ningún cache provider configurado o en modo desarrollo. Devuelve true cuando hay un cache provider configurado y la app se está ejecutando en producción.

`cache.set()`

Type: (options: CacheOptions | false) => void

Establece las opciones de cache para la petición actual. Pasa false para excluirse del caching.

`cache.options`

Type: Readonly<CacheOptions>

Proporciona una snapshot de solo lectura de las opciones de cache acumuladas actuales, incluyendo todos los valores fusionados de maxAge, swr, etag, lastModified, y tags.

`cache.tags`

Type: string[]

Proporciona un array de solo lectura de todas las cache tags acumuladas.

`cache.invalidate()`

Type: (options: InvalidateOptions) => Promise<void>

Purga las entradas cacheadas. Requiere un cache provider configurado.

`logger`

Type: object | undefined

Añadido en: astro@7.0.0 Nuevo

Un objeto que te permite añadir logs adicionales durante el renderizado de una página. Esto es particularmente útil con rutas on-demand y al conectar servicios de agregación de logs (ej. Kibana, Grafana, Loki).

`logger.error()`

Type: (msg: string) => void

Añadido en: astro@7.0.0 Nuevo

Emite un mensaje con nivel error.

---
Astro.logger.error("Can't find the checkout ID.");
---

`logger.warn()`

Type: (msg: string) => void

Añadido en: astro@7.0.0 Nuevo

Emite un mensaje con nivel warn.

---
Astro.logger.warn("Can't find the checkout ID.");
---

`logger.info()`

Type: (msg: string) => void

Añadido en: astro@7.0.0 Nuevo

Emite un mensaje con nivel info.

---
Astro.logger.info("Can't find the checkout ID.");
---

Contribuir Comunidad Patrocinar

Contexto de renderizado de Astro

El objeto context

props

params

url

site

clientAddress

isPrerendered

generator

request

response

redirect()

rewrite()

originPathname

locals

preferredLocale

preferredLocaleList

currentLocale

getActionResult()

callAction()

routePattern

cookies

Utilidades de cookies

cookies.get()

cookies.has()

cookies.set()

cookies.delete()

cookies.merge()

cookies.headers()

cookies.consume()

Tipo AstroCookie

AstroCookie.value

AstroCookie.json()

AstroCookie.number()

AstroCookie.boolean()

AstroCookieGetOptions

AstroCookieGetOptions.decode()

AstroCookieSetOptions

AstroCookieSetOptions.domain

AstroCookieSetOptions.expires

AstroCookieSetOptions.httpOnly

AstroCookieSetOptions.maxAge

AstroCookieSetOptions.path

AstroCookieSetOptions.partitioned

AstroCookieSetOptions.sameSite

AstroCookieSetOptions.secure

AstroCookieSetOptions.encode()

session

session.get()

session.set()

session.regenerate()

session.destroy()

session.load()

csp

csp.insertDirective()

csp.insertStyleResource()

csp.insertStyleHash()

csp.insertScriptResource()

csp.insertScriptHash()

cache

cache.enabled

cache.set()

cache.options

cache.tags

cache.invalidate()

logger

logger.error()

logger.warn()

logger.info()

`props`

`params`

`url`

`site`

`clientAddress`

`isPrerendered`

`generator`

`request`

`response`

`redirect()`

`rewrite()`

`originPathname`

`locals`

`preferredLocale`

`preferredLocaleList`

`currentLocale`

`getActionResult()`

`callAction()`

`routePattern`

`cookies`

`cookies.get()`

`cookies.has()`

`cookies.set()`

`cookies.delete()`

`cookies.merge()`

`cookies.headers()`

`cookies.consume()`

Tipo `AstroCookie`

`AstroCookie.value`

`AstroCookie.json()`

`AstroCookie.number()`

`AstroCookie.boolean()`

`AstroCookieGetOptions`

`AstroCookieGetOptions.decode()`

`AstroCookieSetOptions`

`AstroCookieSetOptions.domain`

`AstroCookieSetOptions.expires`

`AstroCookieSetOptions.httpOnly`

`AstroCookieSetOptions.maxAge`

`AstroCookieSetOptions.path`

`AstroCookieSetOptions.partitioned`

`AstroCookieSetOptions.sameSite`

`AstroCookieSetOptions.secure`

`AstroCookieSetOptions.encode()`

`session`

`session.get()`

`session.set()`

`session.regenerate()`

`session.destroy()`

`session.load()`

`csp`

`csp.insertDirective()`

`csp.insertStyleResource()`

`csp.insertStyleHash()`

`csp.insertScriptResource()`

`csp.insertScriptHash()`

`cache`

`cache.enabled`

`cache.set()`

`cache.options`

`cache.tags`

`cache.invalidate()`

`logger`

`logger.error()`

`logger.warn()`

`logger.info()`