Saltearse al contenido
Astro Astro

@astrojs/preact

Esta integración de Astro habilita el renderizado del lado del servidor y la hidratación del lado del cliente para tus componentes de Preact.

¿Por qué Preact?

Preact es una biblioteca que te permite construir componentes UI interactivos para la web. Si deseas crear características interactivas en tu sitio web utilizando JavaScript, es posible que prefieras usar su formato de componentes en lugar de usar directamente las API del navegador.

Preact también es una gran opción si has utilizado anteriormente React. Preact proporciona la misma API que React, pero en un paquete mucho más pequeño de 3kB. Incluso admite la representación de muchos componentes de React mediante la opción de configuración compat (consulta a continuación).

¿Quieres aprender más sobre Preact antes de usar esta integración?
Revisa “Aprende Preact en 10 minutos”, un tutorial interactivo en su sitio web.

Instalación

Instalación rápida

La herramienta de línea de comandos astro add automatiza la instalación por ti. Ejecuta uno de los siguientes comandos en una nueva ventana de terminal. (Si no estás seguro de qué gestor de paquetes estás usando, ejecuta el primer comando.) Luego, sigue las instrucciones y escribe “y” en la terminal (es decir, “sí”) para cada uno.

Terminal window
# Usando NPM
npx astro add preact
# Usando Yarn
yarn astro add preact
# Usando PNPM
pnpm astro add preact

Si tienes algún problema, no dudes en informarnos en GitHub y prueba los pasos de instalación manual a continuación.

Instalación manual

Primero, instala el paquete @astrojs/preact usando tu gestor de paquetes. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

Terminal window
npm install @astrojs/preact

La mayoría de los gestores de paquetes también instalarán las dependencias asociadas. Sin embargo, si ves un aviso “No se puede encontrar el paquete ‘preact’” (o similar) al iniciar Astro, deberás instalar manualmente Preact:

Terminal window
npm install preact

Luego, aplica esta integración a tu archivo astro.config.* usando la propiedad integrations:

astro.config.mjs
import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';


export default defineConfig({
  // ...
  integrations: [preact()],
  //             ^^^^^^^^
});

Uso

Para usar tu primer componente de Preact en Astro, dirígete a nuestra documentación de frameworks UI. Allí explorarás:

  • 📦 cómo se cargan los componentes del framework,
  • 💧 opciones de hidratación en el lado del cliente, y
  • 🤝 oportunidades para mezclar y anidar diferentes frameworks juntos.

También puedes revisar nuestra Documentación de Integración de Astro para obtener más información sobre las integraciones.

Configuración

La integración de Astro con Preact se encarga de cómo se renderizan los componentes de Preact y tiene sus propias opciones. Puedes cambiar estas opciones en el archivo astro.config.mjs donde se encuentran las configuraciones de integración de tu proyecto.

Para el uso básico, no es necesario configurar la integración de Preact en Astro.

compat

Puedes habilitar preact/compat, la capa de compatibilidad de Preact para renderizar componentes de React sin necesidad de instalar o enviar las bibliotecas más grandes de React a los navegadores web de tus usuarios.

Para hacerlo, pasa un objeto a la integración de Preact y establece compat: true.

astro.config.mjs
import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';


export default defineConfig({
  integrations: [preact({ compat: true })],
});

Con la opción compat habilitada, la integración de Preact renderizará tanto los componentes de React como los componentes de Preact en tu proyecto y también te permitirá importar componentes de React dentro de componentes de Preact. Lee más en “Cambiando a Preact (de React)” en el sitio web de Preact.

Cuando se importan librerías de componentes de React, para reemplazar las dependencias react y react-dom como preact/compat, puedes utilizar overrides para hacerlo.

package.json
{
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest"
  }
}

Consulta las documentaciónes de pnpm overrides y yarn resolutions para conocer sus respectivas características de anulación de dependencias.

Opciones

Combinando múltiples frameworks JSX

Cuando estás utilizando múltiples frameworks JSX (React, Preact, Solid) en el mismo proyecto, Astro necesita determinar qué transformaciones específicas del framework JSX deben usarse para cada uno de tus componentes. Si solo has agregado una integración de framework JSX a tu proyecto, no se necesita configuración adicional.

Utiliza las opciones de configuración include (obligatoria) y exclude (opcional) para especificar qué archivos pertenecen a qué framework. Proporciona un array de archivos y/o carpetas en include para cada framework que estés utilizando. Puedes utilizar comodines para incluir múltiples rutas de archivo.

Recomendamos colocar los componentes comunes de los frameworks en la misma carpeta (p. ej. /components/react/ y /components/solid/) para facilitar la especificación de tus inclusiones, pero esto no es obligatorio:

import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';
import react from '@astrojs/react';
import svelte from '@astrojs/svelte';
import vue from '@astrojs/vue';
import solid from '@astrojs/solid-js';


export default defineConfig({
  // Habilita varios frameworks para admitir todo tipo de componentes diferentes.
  // ¡No se necesita `include` si solo estás utilizando un solo framework JSX!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*'],
    }),
  ],
});

Ejemplos

  • El ejemplo Astro Preact muestra cómo utilizar un componente interactivo de Preact en un proyecto de Astro.
  • El ejemplo de Astro Nanostores muestra cómo compartir el estado entre diferentes componentes, e incluso diferentes frameworks, en un proyecto de Astro.

Solución de problemas

Para obtener ayuda, consulta el canal #support en Discord. ¡Nuestros amables miembros del Equipo de Soporte están aquí para ayudar!

También puedes consultar nuestra documentación de integración de Astro para obtener más información sobre las integraciones.

Contribuyendo

Este paquete es mantenido por el equipo central de Astro. ¡Estás invitado a enviar un problema o PR!

Changelog

Consulta el CHANGELOG.md para un historial de cambios en esta integración.

Otros

Frameworks UI

Adaptadores SSR

Otros