서버 측 렌더링

@sixtyfold/ssr는 최소 서버 캔버스에서 동일한 TypeScript 렌더러를 실행합니다. DOM 캔버스 전역을 가져오거나 브라우저 Worker를 생성하거나 애니메이션을 수행하지 않습니다. 실제 Line 및 Stock PNG 출력은 Node.js, Bun 및 Deno에서 지속적으로 검증됩니다.

SSR 패키지와 실행 환경에 적합한 Canvas2D 구현을 설치하세요. 검증된 호환성 세트는 @napi-rs/canvas를 사용하지만 Sixtyfold는 이를 라이브러리 종속성으로 강제하지 않습니다.

생성된 레퍼런스는 정확한 SSR functions, render options, 및 runtime-neutral canvas types를 나열합니다.

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

캔버스 구현은 이미지 인코딩을 담당합니다.

검증된 서버 런타임

호환성 스위트는 현재 다음 CI 대상들을 고정합니다:

런타임	검증된 버전	Canvas2D 백엔드
Node.js	22.22.3	`@napi-rs/canvas` 1.0.2
Bun	1.3.14	`@napi-rs/canvas` 1.0.2
Deno	2.9.3	`@napi-rs/canvas` 1.0.2

이들은 재현 가능한 CI 대상이며 최소 버전 보장은 아닙니다. 각 런타임은 네트워크 접근 없이 결정론적으로 Line 및 Stock 픽스처를 렌더링합니다. 게이트는 플롯 픽셀을 고정된 시각 참조와 비교하며, 모든 명명된 라벨이 경계 영역 내의 정확한 레이아웃 앵커에 눈에 보이는 잉크를 생성할 것을 요구합니다; 또한 PNG 서명, 치수 및 인코딩된 출력도 검증합니다. 글꼴에 따라 달라지는 글리프 폭이나 잉크 비율은 고정하지 않습니다. PNG는 검사 가능한 CI 아티팩트로 보관됩니다. 릴리스 전에 Node 시각 참조는 Ubuntu, macOS, 및 Windows에서 반복됩니다.

Node.js와 Bun은 동일한 모듈을 직접 실행합니다:

node app.mjs
bun app.mjs

Deno는 로컬 node_modules 트리와 Node-API 캔버스 애드온에 대한 명시적 권한을 필요로 합니다:

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

애플리케이션이 인코딩된 이미지를 디스크에 쓸 때에만 --allow-write=<output-directory>를 추가하세요. 런타임 검증 소스](https://github.com/60fold/charts-js/blob/main/scripts/verify-ssr-runtime.mjs), Bun Node-API 지원](https://bun.sh/docs/runtime/node-api), Deno 네이티브 애드온 가이드](https://docs.deno.com/runtime/fundamentals/node/#use-packages-with-native-addons)를 참조하세요.

지원되는 구성

SSR은 패딩, 방향, 격자, 축, 배경, 범위 선택기, 툴팁 스타일, 크로스헤어 스타일, 레이블, 오버레이, 선 시리즈/LOD, 주식 캔들, 지표, 거래량 프로필, 가격선 및 마커와 같은 렌더러 대상 시각 옵션을 허용합니다. 브라우저 전용 콜백, DOM 컨트롤, 포인터 상호작용 및 Worker는 의도적으로 제외됩니다.

정적 렌더링이 즉시 완료되더라도 명확성을 위해 animated: false를 설정하십시오. 스냅샷 차이를 방지하려면 테스트와 프로덕션에서 동일한 width, height 및 dpr 계약을 사용하십시오.

런타임 중립 캔버스 주입

호출자가 이미 캔버스를 소유하지 않은 경우 SSRRenderOptions에 createCanvas를 제공하십시오. 이는 백킹 스토어 치수를 받습니다. 반환된 객체에는 렌더러에서 사용하는 Canvas2D 메서드와 함께 width, height 및 getContext("2d")가 필요합니다.

결정론적 출력

렌더링 이미지에서 Canvas 구현과 폰트를 고정하세요.
서버가 브라우저 스택을 제공하지 않는 경우 명시적인 글꼴 패밀리를 전달하세요.
요청 렌더링 중 원격 URL 오버레이를 피하고, 렌더링 전에 자산을 해결하고 캐시하세요.
입력 배열, 차트 크기, DPR, 로케일, 표준시대(시간대) 및 옵션을 고정하세요.