# 서버에서 그리기 (SSR)

> renderToSVG 로 DOM 없이 SVG 문자열. Node, Workers, Astro, 메일, OG 이미지.

Source: https://82chart.com/docs/ssr/

화면에 그리는 함수와 같은 함수가 SVG 문자열을 만듭니다. 그래서 `renderToSVG` 로 서버에서 만든 그림, 브라우저에서 그린 차트, `toSVG()` 로 내보낸 파일이 똑같습니다. DOM 이 필요 없어 Node, Cloudflare Workers, Deno, Bun 어디서나 됩니다.

```js
import { renderToSVG } from '@82chart/core';

const svg = renderToSVG(
  {
    type: 'line',
    language: 'ko',          // 서버에는 문서 언어가 없으니 직접
    timeZone: 'Asia/Seoul',  // 서버는 대부분 UTC: 날짜가 하루 밀리지 않게
    title: '주간 방문자',
    unit: '명',
    data: { labels: ['월', '화', '수', '목', '금'], series: [{ name: '방문자', data: [1820, 2140, 1990, 2410, 2290] }] },
  },
  { width: 640, height: 360, theme: 'light' },
);
// '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="선 차트, 주간 방문자. …">…</svg>'
```

| 두 번째 인자 | 기본값 | 설명 |
| --- | --- | --- |
| `width` | 640 | 폭(px) |
| `height` | 자동 | 전체 높이(px). 주지 않으면 그림 부분이 폭 × 0.5625 (`aspectRatio`) |
| `theme` | 'light' | `'light' \| 'dark'` |
| `header` | true | 카드 머리글·범례·주석까지 그리기 |
| `idPrefix` | 자동 | 한 페이지에 여러 SVG를 넣을 때 id 충돌 방지 |

## Cloudflare Workers

```js
import { renderToSVG } from '@82chart/core';

export default {
  async fetch(req, env) {
    const rows = await env.DB.prepare('SELECT day, visits FROM stats ORDER BY day DESC LIMIT 14').all();
    const list = rows.results.reverse();
    const svg = renderToSVG({
      type: 'area', language: 'ko', title: '최근 14일 방문',
      data: { series: [{ name: '방문', data: list.map((r) => [r.day, r.visits]) }] },
    }, { width: 800, height: 400 });
    return new Response(svg, { headers: { 'content-type': 'image/svg+xml; charset=utf-8', 'cache-control': 'max-age=300' } });
  },
};
```

## Astro 같은 정적 사이트

```html
---
import { renderToSVG } from '@82chart/core';
const svg = renderToSVG({ type: 'bar', language: 'ko', data: { labels: ['A', 'B'], series: [{ data: [3, 5] }] } }, { width: 560 });
---
<figure set:html={svg} />
```

## 아이디어: 공유 썸네일(OG 이미지)

블로그 글이나 보고서 페이지의 `og:image` 로 실제 숫자가 든 차트를 쓸 수 있습니다. Worker 에서 `renderToSVG` 로 1200×630 SVG를 만들고, SVG를 PNG로 바꾸는 라이브러리(예: resvg-wasm)로 변환해 캐시해 두면 됩니다. 메일에 붙일 때도 PNG로 바꿔 쓰세요(메일 프로그램 대부분이 SVG를 보여 주지 않음).

> 서버는 대부분 UTC 시간대입니다. 날짜가 있는 차트는 `timeZone: 'Asia/Seoul'` 처럼 시간대를 정해 두면 브라우저에서 그린 것과 같은 날짜가 찍힙니다. [숫자와 날짜](https://82chart.com/docs/numbers-dates/) 참고.

> 서버에서 만든 SVG는 그림입니다. 툴팁·확대 같은 상호작용이 필요하면 브라우저에서 `createChart` 로 다시 그리세요. 스크린리더용 요약은 `aria-label` 과 `<title>` 에 들어 있습니다.