Renderização no servidor

@sixtyfold/ssr executa o mesmo renderer TypeScript contra um canvas mínimo no servidor. Não importa globais de canvas do DOM, não cria workers do navegador nem anima. A saída PNG real de Line e Stock é verificada continuamente em Node.js, Bun e Deno.

Instale o pacote SSR e uma implementação Canvas2D adequada ao seu runtime. O conjunto de compatibilidade verificado utiliza @napi-rs/canvas, mas a Sixtyfold não o impõe como dependência de biblioteca.

A referência gerada lista exatamente as funções SSR, as opções de renderização e os tipos de canvas neutros quanto ao runtime.

pnpm add @sixtyfold/ssr@1 @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");

A implementação do canvas é responsável pela codificação de imagens.

Runtimes de servidor verificados

A suíte de compatibilidade fixa atualmente estes alvos de CI:

Estes são alvos de CI reprodutíveis, não reivindicações de versão mínima. Cada runtime renderiza fixtures determinísticas de Line e Stock sem acesso à rede. O gate compara os píxeis do gráfico com uma referência visual fixada e exige que cada etiqueta nomeada produza tinta visível no seu âncora de layout exato dentro de uma região limitada; também valida assinaturas PNG, dimensões e saída codificada. Não fixa larguras de glifos dependentes de fontes nem rácios de tinta. Os PNGs são mantidos como artefactos de CI inspecionáveis. Antes do lançamento, a referência visual Node é repetida no Ubuntu, macOS, e Windows.

Node.js e o Bun executam o mesmo módulo diretamente:

node app.mjs
bun app.mjs

O Deno requer uma árvore local node_modules e permissões explícitas para o addon Canvas Node-API:

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

Adicione --allow-write=<output-directory> apenas quando a aplicação gravar imagens codificadas no disco. Consulte a verificação de tempo de execução, suporte Bun Node-API e a orientação para addons nativos Deno.

Configuração suportada

O SSR aceita opções visuais dirigidas ao renderer: padding, direction, grid, axes, background, seletor de intervalo, estilo do tooltip, estilo do crosshair, labels, overlays, séries de linhas/LOD, candles de ações, indicadores, volume profile, price lines e marcadores. Callbacks exclusivos do browser, controlos DOM, interação por pointer e workers estão intencionalmente ausentes.

Os helpers 1.0.1 também encaminham a estilização de linha ao nível do gráfico marker e as opções de ações timeScale, showLeftPriceMarker e showRightPriceMarker para os renderers partilhados. Use timeScale: "market" para comprimir observações ausentes na saída estática de ações. Definições explícitas axis.left.cursorLabel.visible ou axis.right.cursorLabel.visible têm precedência sobre os alias correspondentes de price-marker. A saída estática não produz eventos de hover nem movimento de cursor.

Defina animated: false por clareza mesmo que a renderização estática seja concluída de imediato. Use o mesmo contrato width, height e dpr em testes e produção para evitar diferenças em snapshots.

Injeção de canvas independente de runtime

Quando o chamador não possuir já o canvas, forneça createCanvas em SSRRenderOptions. Este recebe as dimensões do backing‑store. O objecto retornado necessita de width, height e getContext("2d") com os métodos Canvas2D utilizados pelo renderer.

Saída determinística

• Fixe a implementação do canvas e as fontes na imagem de renderização.
• Forneça uma família tipográfica explícita se o servidor não disponibilizar a pilha do browser.
• Evite sobreposições de URLs remotos durante a renderização por pedido; resolva e coloque em cache os ativos antes da renderização.
• Mantenha os arrays de entrada, o tamanho do gráfico, DPR, localidade, fuso horário e opções estáveis.