DE

DokuModi

Rendern

Das Rendern beantwortet eine Frage: Wer produziert den HTML-Code und wann. Nexy hat vier Antworten und eine Standardantwort.

Nicht sicher? Behalten Sie SSR bei. Ändern Sie eine Seite nur, wenn Sie den Grund nennen können: Inhalt, der sich selten ändert (ISR), ein Widget, das den Browser benötigt (Insel) oder App-ähnliche Navigation (CSR).

Wie es funktioniert

Wer erstellt den HTML-Code und wann?
SSRrequestserver rendersHTMLbrowser
ISRrequestcached HTML?browser, regenerated in the background
CSRrequestdocument rendered by the serverbrowser takes over navigation
Islandsrequestserver renders the pageone widget hydrates on demand

Die vier Modi

SSR ISR CSR Inseln
Daten werden gelesen auf jede Anfrage bei jeder Regeneration im Browser auf jede Anfrage
Der HTML-Code stammt von Der Server der Server, dann ein Cache Der Server für das erste Dokument, der Browser danach Der Server
JavaScript nur für Inseln nur für Inseln das Framework-Bundle nur die Insel
Flüssigkeitszufuhr keine keine das gesamte Dokument die Insel
Cache keine pro URL, im Speicher keine keine
Beschlossen von Standard revalidate = N auf der Seite useCSR = True im Projekt directive auf der Komponente
Getreide Seite Seite Projekt Komponente

Rendering-Lebenszyklus

Zwei Fakten erklären die meisten Überraschungen.

  1. Ein Projekt befindet sich in einem Modus. useCSR wählt zwischen Servermodus (SSR, ISR, Inseln, .nexy, .md, .mdx Routen) und Clientmodus (Framework-Routen und ein Client-Router). Die beiden können nicht gemischt werden: siehe Servermodus und Clientmodus.
  2. Im Servermodus erfolgt der Modus pro Seite. Eine Seite kann mit revalidate zwischengespeichert werden, eine andere kann eine Insel enthalten, eine dritte kann keines von beidem.

Im Client-Modus wird immer noch ein echtes Dokument gesendet: Nexy rendert es in Node für die erste Antwort, dann übernimmt der Browser die Navigation. Eine CSR-Seite ist keine leere Seite, die auf ein Paket wartet.

Wann zu verwenden

  • Inhalt, Marketing, Dokumentation: SSR plus ISR, wenn sich der Inhalt selten ändert.
  • Eine überwiegend statische Seite mit einem interaktiven Widget: SSR mit einer Insel.
  • Dashboards, Editoren, App-ähnliche Navigation: CSR.
  • Eine Seite, die ständig gelesen und selten geändert wird: ISR.

Konfiguration

Modus Wo
SSR nirgendwo: Es ist die Standardeinstellung
ISR revalidate = 60 im Titelblatt einer .nexy-Seite
CSR useCSR = True in nexyconfig.py, mit useFF gesetzt
Inseln directive="client:visible" auf dem Komponenten-Tag

Beispiel

src/routes/blog/index.nexy
---revalidate = 60---<h1>Rendered at most once per minute</h1>

Die gleiche Seite ohne die Frontmatter-Zeile ist SSR.

src/apps/sales_view.nexy
---from "@/components/Chart.tsx" import Chart---<h1>Rendered on every request</h1><Chart directive="client:visible" />

Die Ansicht ist SSR und die Karte ist eine Insel, die beim Scrollen in die Ansicht hydratisiert.

Einschränkungen

  • Es gibt keinen SSG-Modus. Nexy rendert HTML zur Erstellungszeit vor (Komponenten-HTML, Clientdokumente), liest es jedoch immer über den Server zurück: kein Exportbefehl, kein eigenständiger Ordner zum statischen Hosten. Für eingefrorene Inhalte verwenden Sie ISR mit einem langen Fenster.
  • ISR ist kein CDN. Der Cache befindet sich in dem Prozess, der die Seite rendert; Mehrere Arbeiter halten mehrere Caches. Siehe ISR.
  • CSR ist eine Projektentscheidung. Sie können nicht eine Seite CSR erstellen und die restliche Seite SSR behalten.
  • Inseln befeuchten die Insel, nicht die Seite. Eine Seite, deren Inseln alle voneinander abhängen, ist eine getarnte CSR-Seite.

Nächste Schritte

  • SSR: die Standardeinstellung
  • ISR: Eine Seite pro URL zwischenspeichern
  • CSR: Handnavigation zum Browser
  • Inseln: Hydrat ein Widget
  • Leistung

Auf GitHub bearbeiten

Enter öffnet das Ergebnis, Esc schließt.