i18n(de): add solid integration guide

src/content/docs/de/guides/integrations-guide/solid-js.mdx

@@ -0,0 +1,179 @@
+---
+type: integration
+title: '@astrojs/solid-js'
+description: Lerne wie du die @astrojs/solid-js Framework-Integration in deinem Astro-Projekt verwendest, um den Component-Support auszubauen.
+githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/solid/'
+category: renderer
+i18nReady: true
+---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+
+Diese **[Astro-Integration][astro-integration]** erlaubt dir serverseitiges Rendering und clientseitige Hydratation von deinen [SolidJS](https://www.solidjs.com/)-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](#manuelle-installation).
+
+Um `@astrojs/solid-js` zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus.
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npx astro add solid
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm astro add solid
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn astro add solid
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Sollten dir dabei Probleme begegnen, [melde sie gerne bei uns auf GitHub](https://github.com/withastro/astro/issues) und versuche stattdessen die manuelle Installation.
+
+### Manuelle Installation
+
+Installiere zuerst das `@astrojs/solid-js`-Paket:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install @astrojs/solid-js
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add @astrojs/solid-js
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add @astrojs/solid-js
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+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:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install solid-js
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add solid-js
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add solid-js
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Wende dann die Integration auf die Datei `astro.config.*` an, indem du die Eigenschaft `integrations` verwendest:
+
+```js title="astro.config.mjs" ins={2} ins="solid()"
+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][astro-ui-frameworks]. 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. Platzhalter können verwendet werden, um mehrere Dateipfade anzugeben.
+
+```js title="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/*'],
+    }),
+  ],
+});
+```
+
+## Anwendung
+
+Du kannst SolidJS-Komponenten wie jede andere [UI-Framework-Komponenten](/de/guides/framework-components/) 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`][solid-render-to-string-async ]-Funktion dargestellt. Daher musst du asynchrone Komponenten nicht in Suspense-Grenzen umwickeln.
+
+Zum Beispiel kannst du Solids [`createResource`][solid-create-resource] verwenden, um asnychron Daten von einem Server zu holen. Diese Daten werden im initialen, server-gerenderten HTML von Astro inkludiert sein:
+
+```tsx
+// 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][solid-lazy-components] aufgelöst und deren HTML wird in der ursprünglichen server-gerenderten Seite enthalten sein.
+
+Nicht-hydratisierende [client:only Komponenten][astro-client-only] werden nicht automatisch in Suspense-Grenzen umwickelt.
+
+Du kannst gerne weitere Suspense-Grenzen nach Belieben hinzufügen.
+
+[astro-integration]: /de/guides/integrations-guide/
+
+[astro-ui-frameworks]: /de/guides/framework-components/#framework-komponenten-nutzen
+
+[astro-client-only]: /de/reference/directives-reference/#clientonly
+
+[solid-render-to-string-async]: https://www.solidjs.com/docs/latest/api#rendertostringasync
+
+[solid-create-resource]: https://www.solidjs.com/docs/latest/api#createresource
+
+[solid-lazy-components]: https://www.solidjs.com/docs/latest/api#lazy