DokuModi
Inseln und Flüssigkeitszufuhr
Definition
Eine Insel ist eine Client-Komponente – React, Vue, Svelte, Solid oder Preact – die in eine .nexy-Seite importiert wird. Der Server rendert seinen HTML-Code. Der Browser macht diese eine Komponente interaktiv. Der Rest der Seite bleibt HTML.
Inseln existieren im Servermodus. Im Client-Modus sind die Komponenten die Seiten: siehe CSR.
Wie es funktioniert
from "@/components/Counter.tsx" import Counter<h1>Static heading</h1><Counter directive="client:visible" />from "@/components/Counter.tsx" import Counter<h1>Static heading</h1><Counter directive="client:visible" />Nexy rendert die Komponente zum Zeitpunkt der Erstellung, speichert ihren HTML-Code und platziert ihn auf der Seite. Die Seitenantwort enthält diesen HTML-Code und die Requisiten als JSON-Attribut. Im Browser lädt die Insellaufzeit die Komponente und übernimmt den Container.
directive entscheidet, wann das geschieht. Ohne eine spendet die Insel Feuchtigkeit, sobald ihre Laufzeit bereit ist.
Rendering-Lebenszyklus
- Beim Build wird jede Client-Komponente in HTML gerendert und unter
__nexy__/client/static/geschrieben. - Eine Anfrage rendert die Seite
.nexy; Anstelle des Tags wird der HTML-Code der Insel eingefügt. - Die Antwort enthält den HTML-Code, die Requisiten und die Direktive als Attribute.
- Im Browser plant die Laufzeit die Flüssigkeitszufuhr gemäß der Anweisung.
- Hydration ersetzt das statische HTML durch die Live-Komponente; Der Rest der Seite ist unberührt.
In der Entwicklung gibt es keinen Build-Snapshot: Der Container ist leer und die Komponente wird im Browser gerendert. Die Seite sieht gleich aus, aber die erste Lackierung weicht von der Produktion ab.
Wann zu verwenden
- Eine Seite, die größtenteils aus Inhalten besteht und über ein oder zwei interaktive Bereiche verfügt.
- Ein Widget, das für Crawler im HTML vorhanden sein und trotzdem funktionieren muss.
- Eine Komponente, die den Browser benötigt, aber nicht die gesamte Seite in das Client-Rendering ziehen sollte.
Konfiguration
| Richtlinie | Spendet Feuchtigkeit |
|---|---|
keine, oder client:load |
sofort |
client:idle |
wenn der Browser inaktiv ist (requestIdleCallback, 2 s Timeout) |
client:visible |
wenn die Insel das Ansichtsfenster betritt, 200 Pixel früher |
client:media |
wenn eine Medienanfrage übereinstimmt; Stellen Sie es mit der Requisite media ein |
<Chart directive="client:media" media="(min-width: 768px)" />client:media wird standardmäßig auf (min-width: 768px) gesetzt, wenn media nicht vorhanden ist, und hydratisiert einmal. Bei einem Browser ohne IntersectionObserver fällt client:visible auf den Leerlauf zurück.
directive und media werden von Nexy verbraucht: Sie werden nicht an Ihre Komponente übergeben.
Beispiel
import { useState } from "react" export default function Counter({ start = 0 }: { start?: number }) { const [count, setCount] = useState(start) return <button onClick={() => setCount(count + 1)}>{count}</button>}from "@/components/Counter.tsx" import Counter<h1>Count</h1><Counter start=3 directive="client:idle" />from "@/components/Counter.tsx" import Counter<h1>Count</h1><Counter start=3 directive="client:idle" />Einschränkungen
client:onlyspendet nie Feuchtigkeit. Es wird akzeptiert, aber die Laufzeit überspringt es, sodass das Server-HTML inaktiv bleibt. Verwenden Sie eine Client-Route (CSR), wenn eine Komponente nicht auf dem Server gerendert werden kann.client:manualhat keinen öffentlichen Auslöser. Es wird auch automatisch übersprungen und das Handle, das es fortsetzt, ist intern.- Requisiten müssen JSON sein. Sie werden mit
json.dumpsserialisiert; Ein Wert, der nicht serialisiert werden kann, wird gelöscht und die Insel empfängt{}– stillschweigend. - Eine Insel ist keine Client-Komponente mit gemeinsamem Status. Ohne einen Mechanismus, den Sie selbst hinzufügen, teilen sich zwei Inseln keinen Status.
- Die Insel wird vom Server nicht neu gerendert. Ihr HTML ist der Build-Snapshot sowie alles, was die Komponente nach der Hydratisierung tut.
- Eine Inselseite ist eine getarnte CSR-Seite. Wenn jeder Block mit jedem anderen kommunizieren muss, wählen Sie stattdessen den Client-Modus.