Renderizado del lado del servidor

@sixtyfold/ssr ejecuta el mismo renderizador TypeScript contra un canvas mínimo en servidor. No importa globales de canvas del DOM, no crea workers de navegador ni anima. La salida PNG real de Line y Stock se verifica continuamente en Node.js, Bun y Deno.

Instala el paquete SSR y una implementación de Canvas2D adecuada para tu runtime. El conjunto de compatibilidad verificado usa @napi-rs/canvas, pero Sixtyfold no lo impone como dependencia de librería.

La referencia generada lista exactamente las funciones SSR, las opciones de render y los tipos de canvas neutrales al runtime.

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");

La implementación de canvas es responsable de la codificación de imágenes.

Runtimes de servidor verificados

La suite de compatibilidad fija actualmente estos objetivos de CI:

Estos son objetivos reproducibles de CI, no reivindicaciones de versión mínima. Cada runtime renderiza fixtures deterministas de Line y Stock sin acceso a la red. La puerta compara los píxeles del plot con una referencia visual fijada y exige que cada etiqueta nombrada produzca píxeles visibles en su ancla de layout exacta dentro de una región acotada; también valida las firmas PNG, las dimensiones y la salida codificada. No fija anchos de glifos ni proporciones de tinta dependientes de la fuente. Los PNG se conservan como artefactos de CI inspeccionables. Antes de una publicación, la referencia visual de Node se repite en Ubuntu, macOS y Windows.

Node.js y Bun ejecutan el mismo módulo directamente:

node app.mjs
bun app.mjs

Deno requiere un árbol local node_modules y permisos explícitos para el addon de Canvas Node-API:

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

Añade --allow-write=<output-directory> solo cuando la aplicación escriba imágenes codificadas en disco. Consulta la fuente de verificación del runtime, el soporte Node-API de Bun, y la guía de addons nativos de Deno.

Configuración compatible

SSR acepta opciones visuales orientadas al renderizador: padding, direction, grid, axes, background, range selector, tooltip style, crosshair style, labels, overlays, line series/LOD, stock candles, indicators, volume profile, price lines y markers. Callbacks exclusivos de navegador, controles DOM, interacción por pointer y workers están intencionadamente ausentes.

Establece animated: false para mayor claridad aunque el renderizado estático termine inmediatamente. Usa el mismo contrato width, height y dpr en tests y producción para evitar diferencias en los snapshots.

Inyección de canvas independiente del runtime

Cuando el llamante no posee ya el canvas, suministra createCanvas en SSRRenderOptions. Este recibe dimensiones de backing-store. El objeto devuelto necesita width, height y getContext("2d") con los métodos Canvas2D usados por el renderizador.

Salida determinista

• Fija la implementación de canvas y las fuentes en la imagen de renderizado.
• Pasa una familia tipográfica explícita si el servidor no proporciona la pila del navegador.
• Evita overlays con URL remota durante el renderizado de la petición; resuelve y cachea los assets antes de renderizar.
• Mantén estables las matrices de entrada, el tamaño del gráfico, DPR, localización, zona horaria y opciones.