服务器端渲染

@sixtyfold/ssr 在一个最小的服务器画布上运行相同的 TypeScript 渲染器。它不导入 DOM 画布全局变量、不创建浏览器 Worker，也不执行动画。真实的折线图和股票图 PNG 输出在 Node.js、Bun 和 Deno 中持续验证。

安装 SSR 包和适合你运行时的 Canvas2D 实现。经验证的兼容集合使用 @napi-rs/canvas，但 Sixtyfold 不将其作为库依赖强制要求。

生成的参考列出了确切的 SSR 函数、渲染选项 和 与运行时无关的画布类型。

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

图像编码由画布实现负责。

经验证的服务器运行时

兼容性套件当前在这些 CI 目标上固定：

这些是可重现的持续集成目标，而非最低版本声明。每个运行时都在无网络访问的情况下确定性地渲染 Line 和 Stock 夹具。门禁将绘图区像素与固定视觉基准进行比较，并要求每个具名标签在限定区域内的精确布局锚点产生可见像素；它还验证 PNG 签名、尺寸和编码输出。门禁不会固定依赖字体的字形宽度或墨迹比例。PNG 文件作为可检查的 CI 产物予以保留。发布前还会在 Ubuntu、macOS 和 Windows 上重复运行 Node 视觉基准。

Node.js 和 Bun 直接运行相同模块：

node app.mjs
bun app.mjs

Deno 需要本地 node_modules 树以及针对 Node-API canvas 扩展的显式权限：

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

仅当应用将编码后的图像写入磁盘时才添加 --allow-write=<output-directory>。参见运行时验证源码、Bun Node-API 支持和Deno 原生扩展指南。

支持的配置

SSR 接受面向渲染器的可视选项：padding、direction、grid、axes、background、范围选择器、tooltip 样式、crosshair 样式、labels、overlays、line series/细节层级、stock candles、indicators、volume profile、price lines 和 markers。浏览器专属的回调、DOM 控件、指针交互和 Workers 被有意省略。

即便静态渲染会立即完成，也应设置 animated: false 以提高可读性。在测试和生产中使用相同的 width、height 和 dpr 合约，以防止快照差异。

与运行时无关的画布注入

当调用者尚未拥有画布时，在 SSRRenderOptions 中提供 createCanvas。它会接收 backing-store 尺寸。返回的对象需要包含 width、height 和 getContext("2d")，这些为渲染器使用的 Canvas2D 方法。

确定性输出

• 在渲染镜像中锁定 Canvas2D 实现和字体。
• 如果服务器未提供浏览器字体堆栈，请传入明确的字体系列。
• 在请求渲染期间避免远程 URL 覆盖；在渲染之前解析并缓存资源。
• 保持输入数组、图表尺寸、DPR、区域设置、时区和选项稳定。