Zum Inhalt springen

@astrojs/ solid-js

Diese Astro-Integration erlaubt dir serverseitiges Rendering und clientseitige Hydratation von deinen SolidJS-Komponenten.

Astro verfügt über einen astro add-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die Integrationen auch manuell installieren.

Um @astrojs/solid-js zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus.

Terminal-Fenster
npx astro add solid

Sollten dir dabei Probleme begegnen, melde sie gerne bei uns auf GitHub und versuche stattdessen die manuelle Installation.

Installiere zuerst das @astrojs/solid-js-Paket:

Terminal-Fenster
npm install @astrojs/solid-js

Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung “Cannot find package ‘solid-js’” (oder eine ähnliche Meldung) erhältst, musst du SolidJS manuell installieren:

Terminal-Fenster
npm install solid-js

Wende dann die Integration auf die Datei astro.config.* an, indem du die Eigenschaft integrations verwendest:

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

Um deine ersten SolidJS-Komponenten in Astro zu verwenden, gehe zu unserer UI-Framework Dokumentation. Dort lernst du:

  • 📦 wie Framework-Komponenten geladen werden,
  • 💧 clientseitige Hydratationsoptionen, und
  • 🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen

Wenn du verschiedene JSX-Frameworks (React, Preact, Solid) im gleichen Projekt verwendest, muss Astro bestimmen, welche JSX-Framework-spezifischen Transformationen für jede deiner Komponenten verwendet werden sollen. Wenn du nur eine JSX-Framework-Integration zu deinem Projekt hinzugefügt hast, ist keine weitere Konfiguration nötig.

Verwende dazu die include (erforderlich) und exclude (optional) Konfigurationsoption, um zu spezifizieren, welche Dateien zu welchem Framework gehören. Stelle dazu ein Array aus Dateien und/oder Verzeichnissen in der include-Option für jedes Framework, das du nutzt, bereit. Zudem können auch Wildcards verwendet werden, um mehrere Dateipfade anzugeben.

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({
// Aktiviere viele Frameworks, um alle Arten von Komponenten zu unterstützen.
// Wenn du nur ein JSX-Framework verwendest, ist `include` nicht notwendig.
integrations: [
preact({
include: ['**/preact/*'],
}),
react({
include: ['**/react/*'],
}),
solid({
include: ['**/solid/*'],
}),
],
});

Hinzugefügt in: @astrojs/solid-js@4.2.0

Du kannst die Solid-DevTools während des Programmierens verwenden, indem du ein Objekt mit devtools: true in die Konfiguration der solid()-Integration hinzufügst und das solid-devtools-Paket zu deinem Projekt hinzufügst:

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

Du kannst SolidJS-Komponenten wie jede andere UI-Framework-Komponenten verwenden.

Um Solid Resources und Lazy-Komponenten ohne übermäßige Konfiguration zu unterstützen, werden reine Server- und Hydratation-Komponenten automatisch in Suspense-Grenzen auf der höchsten Ebene eingeschlossen und auf dem Server mithilfe von renderToStringAsync-Funktion dargestellt. Daher musst du asynchrone Komponenten nicht in Suspense-Grenzen umwickeln.

Zum Beispiel kannst du Solids createResource verwenden, um asnychron Daten von einem Server zu holen. Diese Daten werden im initialen, server-gerenderten HTML von Astro inkludiert sein:

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

Ebenso werden Solids Lazy-Komponenten aufgelöst und deren HTML wird in der ursprünglichen server-gerenderten Seite enthalten sein.

Nicht-hydratisierende client:only Komponenten werden nicht automatisch in Suspense-Grenzen umwickelt.

Du kannst gerne weitere Suspense-Grenzen nach Belieben hinzufügen.

Weitere Integrationen

UI-Frameworks

SSR-Adapter

Sonstiges

Wirke mit

Worum geht es?

Community