Aller au contenu

@astrojs/ solid-js

Cette intégration Astro permet le rendu côté serveur et l’hydratation côté client pour vos composants SolidJS.

Astro inclut une commande astro add pour automatiser l’installation des intégrations officielles. Si vous préférez, vous pouvez installer les intégrations manuellement à la place.

Pour installer @astrojs/solid-js, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

Fenêtre de terminal
npx astro add solid

Si vous rencontrez des problèmes, n’hésitez pas à nous les signaler sur GitHub et essayez les étapes d’installation manuelle ci-dessous.

Tout d’abord, installez le paquet @astrojs/solid-js :

Fenêtre de terminal
npm install @astrojs/solid-js

La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement Cannot find package 'solid-js' (ou similaire) lorsque vous démarrez Astro, vous devez installer SolidJS :

Fenêtre de terminal
npm install solid-js

Ensuite, appliquez l’intégration à votre fichier astro.config.* en utilisant la propriété integrations :

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

Pour utiliser votre premier composant SolidJS dans Astro, consultez notre documentation sur les frameworks UI. Vous y découvrirez :

  • 📦 comment les composants du framework sont chargés,
  • 💧 les options d’hydratation côté client, et
  • 🤝 les possibilités de mélanger et d’imbriquer les Frameworks.

Ajouté à la version : @astrojs/solid-js@4.2.0

Vous pouvez activer Solid DevTools durant le développement en passant un objet avec devtools : true à votre configuration d’intégration solid() et en ajoutant solid-devtools aux dépendances de votre projet :

Fenêtre 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 })],
});

Lorsque vous utilisez plusieurs frameworks JSX (React, Preact, Solid) dans le même projet, Astro doit déterminer quelles transformations spécifiques au framework JSX doivent être utilisées pour chacun de vos composants. Si vous n’avez ajouté qu’une seule intégration de framework JSX à votre projet, aucune configuration supplémentaire n’est nécessaire.

Utilisez les options de configuration include (obligatoire) et exclude (optionnelle) pour spécifier quels fichiers appartiennent à quel framework. Fournissez un tableau de fichiers et/ou de dossiers à inclure pour chaque framework que vous utilisez. Des caractères joker peuvent être utilisés pour inclure plusieurs chemins de fichiers.

Nous recommandons de placer les composants communs du framework dans le même dossier (par exemple /components/react/ et /components/solid/) pour faciliter la spécification de vos inclusions, mais ce n’est pas obligatoire :

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({
// Permettre à de nombreux frameworks de prendre en charge tous les différents types de composants.
// Aucun `include` n'est nécessaire si vous n'utilisez qu'un seul framework JSX !
integrations: [
preact({
include: ['**/preact/*'],
}),
react({
include: ['**/react/*'],
}),
solid({
include: ['**/solid/*', '**/node_modules/@suid/material/**'],
}),
],
});

Utilisez un composant SolidJS comme vous le feriez avec n’importe quel composant UI framework.

Afin de prendre en charge les ressources Solid et les composants Lazy sans configuration excessive, les composants réservés au serveur et les composants d’hydratation sont automatiquement englobés dans les limites de Suspense de niveau supérieur et rendu sur le serveur à l’aide de la fonction renderToStringAsync. Par conséquent, il n’est pas nécessaire d’ajouter une limite de suspension de haut niveau autour des composants asynchrones.

Par exemple, vous pouvez utiliser la fonction createResource de Solid pour récupérer des données distantes asynchrones sur le serveur. Les données distantes seront incluses dans le HTML initial rendu par le serveur à partir d’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>Name:</h2>
{/* Luke Skywalker */}
<div>{name()}</div>
</>
);
}

De même, les Lazy Components de Solid seront également résolus et leur HTML sera inclus dans la page initiale rendue par le serveur.

Les composants non hydratants client:only ne sont pas automatiquement englobés dans les limites de Suspense.

N’hésitez pas à ajouter d’autres limites de Suspense selon vos préférences.

Plus d'intégrations

Framework d'interface utilisateur

Adaptateurs SSR

Autres intégrations