import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro' import Since from '/components/Since.astro';

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

Installation

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.

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

Manuelle Installation

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

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:

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

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

Erste Schritte

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

Optionen

Kombination mehrerer JSX-Frameworks

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.

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/*'],    }),  ],});

Konfiguration

devtools

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:

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

Anwendung

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

Suspense-Grenzen

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.tsxfunction 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.