Serverseitiges Rendering

@sixtyfold/ssr führt denselben TypeScript-Renderer gegen eine minimale Server-Canvas aus. Er importiert keine DOM-Canvas-Globals, erstellt keine Browser-Worker und animiert nicht. Echtes Line- und Stock-PNG-Ausgabe wird kontinuierlich in Node.js, Bun und Deno verifiziert.

Installieren Sie das SSR-Paket und eine Canvas2D-Implementierung, die zu Ihrer Laufzeit passt. Die verifizierte Kompatibilitätsmenge verwendet @napi-rs/canvas, aber Sixtyfold zwingt dies nicht als Bibliotheksabhängigkeit auf.

Die generierte Referenz listet die genauen SSR-Funktionen, Renderoptionen und laufzeitneutrale Canvas-Typen auf.

pnpm add @sixtyfold/ssr@next @napi-rs/canvas

import { createCanvas } from "@napi-rs/canvas";
import { renderLineChartSSR } from "@sixtyfold/ssr";

const width = 1200;
const height = 630;
const canvas = createCanvas(width * 2, height * 2);

renderLineChartSSR(
  canvas,
  data,
  {
    animated: false,
    chartBackground: "#081018",
    series: [{ color: "#65d6ff", width: 2 }],
    axis: { bottom: { format: "time" } },
  },
  { width, height, dpr: 2 },
);

const png = await canvas.encode("png");

Die Canvas-Implementierung ist für die Bildkodierung verantwortlich.

Verifizierte Server-Laufzeiten

Die Kompatibilitäts-Suite fixiert derzeit diese CI-Ziele:

Dies sind reproduzierbare CI-Ziele, keine Mindestversionsangaben. Jede Runtime rendert deterministische Line- und Stock-Fixtures ohne Netzwerkzugang. Das Gate vergleicht Plot-Pixel mit einer fixierten visuellen Referenz und verlangt, dass jede benannte Beschriftung an ihrem exakten Layout-Anker innerhalb eines begrenzten Bereichs sichtbare Pixel erzeugt; außerdem prüft es PNG-Signaturen, Abmessungen und kodierte Ausgabe. Fontabhängige Glyphenbreiten oder Tintenverhältnisse werden nicht fixiert. Die PNGs werden als prüfbare CI-Artefakte aufbewahrt. Vor einer Veröffentlichung wird die visuelle Node-Referenz unter Ubuntu, macOS und Windows wiederholt.

Node.js und Bun führen dasselbe Modul direkt aus:

node app.mjs
bun app.mjs

Deno benötigt einen lokalen node_modules-Baum und explizite Berechtigungen für das Node-API-Canvas-Addon:

deno run \
  --allow-read \
  --allow-env \
  --allow-ffi \
  --allow-sys=homedir \
  --node-modules-dir=manual \
  app.mjs

Fügen Sie --allow-write=<output-directory> nur hinzu, wenn die Anwendung kodierte Bilder auf die Festplatte schreibt. Siehe die Runtime-Verifikationsquelle, Bun Node-API-Unterstützung und Deno native-addon Anleitung.

Unterstützte Konfiguration

SSR akzeptiert renderer-seitige visuelle Optionen: Padding, Richtung, Raster, Achsen, Hintergrund, Bereichsauswahl, Tooltip‑Stil, Crosshair‑Stil, Beschriftungen, Overlays, Linienserien/LOD, Kurskerzen, Indikatoren, Volumenprofil, Preislinien und Marker. Browser‑spezifische Callbacks, DOM‑Steuerelemente, Pointer‑Interaktion und Worker sind absichtlich nicht enthalten.

Setzen Sie animated: false zur Klarheit, auch wenn das statische Rendering sofort abgeschlossen ist. Verwenden Sie denselben width, height und dpr Vertrag in Tests und Produktion, um Snapshot‑Unterschiede zu vermeiden.

Laufzeitneutrale Canvas‑Injektion

Wenn der Aufrufer die Canvas nicht bereits besitzt, liefern Sie createCanvas in SSRRenderOptions. Es erhält Backing‑Store‑Dimensionen. Das zurückgegebene Objekt benötigt width, height und getContext("2d") mit den vom Renderer verwendeten Canvas2D‑Methoden.

Deterministische Ausgabe

• Sperren Sie die Canvas‑Implementierung und Schriften im Rendering‑Image.
• Geben Sie eine explizite Schriftfamilie an, wenn der Server den Browser‑Stack nicht bereitstellt.
• Vermeiden Sie Remote‑URL‑Overlays während der Anfrage‑Renderings; lösen und cachen Sie Assets vor dem Rendern.
• Halten Sie Eingabe-Arrays, Diagrammgröße, DPR, Gebietsschema, Zeitzone und Optionen stabil.