Renderização do lado do servidor

@sixtyfold/ssr executa o mesmo renderizador TypeScript contra um canvas mínimo no servidor. Não importa globais de canvas do DOM, não cria workers de navegador nem anima. A saída real em PNG 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 usa @napi-rs/canvas, mas a Sixtyfold não o impõe como dependência de biblioteca.

A referência gerada lista exactamente as funções SSR, as opções de renderização e os tipos de canvas neutros quanto ao 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");

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

Runtimes de servidor verificados

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

Estes são alvos de CI reprodutíveis, não declarações de versão mínima. Cada runtime renderiza fixtures determinísticas Line e Stock sem acesso à rede. O gate compara os píxeis do plot com uma referência visual fixa e exige que cada rótulo identificado produza píxeis visíveis na sua âncora de layout exata dentro de uma região limitada; também valida assinaturas PNG, dimensões e saída codificada. Não fixa larguras de glifos nem proporções de tinta dependentes da fonte. Os PNGs são retidos como artefatos de CI inspecionáveis. Antes de uma publicação, a referência visual de Node é repetida em 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 Node-API do canvas:

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 escrever imagens codificadas para disco. Veja a fonte de verificação do runtime, suporte Node-API do Bun, e orientação para addons nativos do Deno.

Configuração suportada

O SSR aceita opções visuais dirigidas ao renderizador: padding, direction, grid, axes, background, seletor de intervalo, estilo do tooltip, estilo da crosshair, labels, overlays, séries de linhas/LOD, candlesticks de ações, indicadores, perfil de volume, linhas de preço e marcadores. Callbacks específicos do browser, controlos DOM, interação por pointer e workers estão intencionalmente ausentes.

Defina animated: false para clareza mesmo que a renderização estática termine imediatamente. Use o mesmo contrato width, height e dpr em testes e produção para evitar diferenças de snapshot.

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 precisa de width, height e getContext("2d") com os métodos Canvas2D usados pelo renderizador.

Saída determinística

• Fixe a implementação do canvas e as fonts na imagem de renderização.
• Passe uma família de fonts explícita se o servidor não fornecer a stack do browser.
• Evite overlays de URL remotas durante a renderização de pedidos; resolva e cache os assets antes de renderizar.
• Manter estáveis os arrays de entrada, o tamanho do gráfico, o DPR, a localidade, o fuso horário e as opções.