60FOLDCOMPONENTS

サーバーサイドレンダリング

DOMに依存しないCanvas2D契約を通じてラインおよび株価チャートをレンダリングします。

@sixtyfold/ssrは最小限のサーバーキャンバスに対して同じTypeScriptレンダラーを実行します。DOMのキャンバスグローバルをインポートせず、ブラウザWorkerを作成せず、アニメーションもしません。実際のLineおよびStockの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ターゲットを固定しています:

Runtime検証済みバージョンCanvas2D バックエンド
Node.js22.22.3@napi-rs/canvas 1.0.2
Bun1.3.14@napi-rs/canvas 1.0.2
Deno2.9.3@napi-rs/canvas 1.0.2

これらは再現可能なCIターゲットであり、最小バージョンの主張ではありません。各ランタイムはネットワークアクセスなしで決定論的に Line と Stock のフィクスチャをレンダリングします。ゲートはplotのピクセルを固定された視覚リファレンスと比較し、名前付きの各ラベルが境界領域内の正確なレイアウトアンカーに可視ピクセルを生成することを要求します。また、PNGシグネチャ、寸法、エンコード出力も検証します。フォント依存のグリフ幅やインク比率は固定しません。PNGは検査可能なCIアーティファクトとして保持されます。公開前には、Nodeの視覚リファレンスをUbuntu、macOS、Windowsで繰り返します。

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 style、crosshair style、labels、overlays、line series/詳細度、stock candles、indicators、volume profile、price lines、および markers。ブラウザ専用のコールバック、DOMコントロール、ポインター操作、およびWorkersは意図的に含まれていません。

静的レンダリングは直ちに完了しますが、明確化のためにanimated: falseを設定してください。スナップショット差分を防ぐために、テストと本番で同じwidth、height、およびdpr契約を使用してください。

ランタイム中立のキャンバス注入

呼び出し元が既にキャンバスを所有していない場合、createCanvasをSSRRenderOptionsに渡してください。これはバックイングストアの寸法を受け取ります。返されるオブジェクトはレンダラーが使用するCanvas2Dメソッドを含むwidth、height、およびgetContext("2d")を必要とします。

決定論的な出力

  • レンダリング画像でキャンバス実装とフォントを固定してください。
  • サーバーがブラウザスタックを提供しない場合は明示的なフォントファミリを渡してください。
  • リクエストレンダリング中にリモートURLのオーバーレイを避けてください; レンダリング前にアセットを解決してキャッシュしてください。
  • 入力配列、チャートのサイズ、DPR、ロケール、タイムゾーン、およびオプションを安定させてください。