Saltearse al contenido

@astrojs/ solid-js

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

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

Para instalar @astrojs/solid-js, ejecuta lo siguiente desde el directorio raíz de tu proyecto y sigue las instrucciones:

Ventana de terminal
npx astro add solid

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

Primero, instala el paquete @astrojs/solid-js:

Ventana de terminal
npm install @astrojs/solid-js

La mayoría de los gestores de paquetes instalarán las dependencias asociadas también. Si ves un mensaje de advertencia Cannot find package 'solid-js' (o similar) cuando inicias Astro, necesitarás instalar SolidJS:

Ventana de terminal
npm install solid-js

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

astro.config.mjs
import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid-js';
export default defineConfig({
// ...
integrations: [solid()],
});

Para usar tu primer componente con solidjs en Astro, dirígete a nuestra documentación del interfaz de usuario. Explorarás:

  • 📦 como se cargan los componentes de framework,
  • 💧 opciones de hidratación del lado del cliente, y
  • 🤝 oportunidades para mezclar y anidar frameworks juntos

Agregado en: @astrojs/solid-js@4.2.0

Puedes habilitar las herramientas de desarrollo de Solid en desarrollo pasando un objeto con devtools: true a tu configuración de integración solid() y agregando solid-devtools a las dependencias de tu proyecto:

Ventana de terminal
npm install solid-devtools
astro.config.mjs
import { defineConfig } from 'astro/config';
import solid from '@astrojs/solid';
export default defineConfig({
// ...
integrations: [solid({ devtools: true })],
});

Combinando múltiples frameworks JSX

Sección titulada 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:

astro.config.mjs
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/*', '**/node_modules/@suid/material/**'],
}),
],
});

Usa un componente SolidJS como lo harías con cualquier componente de framework UI.

Para admitir los recursos de Solid y los componentes Lazy sin una configuración excesiva, los componentes solo del servidor y de hidratación se envuelven automáticamente en límites de Suspense de nivel superior y se renderizan en el servidor utilizando la función renderToStringAsync. Por lo tanto, no es necesario agregar un límite de Suspense de nivel superior alrededor de los componentes asíncronos. Por ejemplo, puedes usar createResource de Solid para obtener datos remotos asíncronos en el servidor. Los datos remotos se incluirán en el HTML inicial renderizado en el servidor desde Astro:

CharacterName.tsx
function CharacterName() {
const [name] = createResource(() =>
fetch('https://swapi.dev/api/people/1')
.then((result) => result.json())
.then((data) => data.name)
);
return (
<>
<h2>Nombre:</h2>
{/* Luke Skywalker */}
<div>{name()}</div>
</>
);
}

Similarmente, los componentes Lazy de Solid también se resolverán y su HTML se incluirá en la página inicial renderizada en el servidor. Los componentes client:only que no se hidratan no se envuelven automáticamente en límites de Suspense.

Sientete libre de agregar límites de Suspense adicionales según tu preferencia.

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones