DOM 의존성 제거와 Canvas 전환을 통한 SSR 및 대규모 타임라인 렌더링 최적화

I tried to use vis.js… then SSR and performance got in the way

Nik2026년 6월 5일2분intermediate

AI 요약

Context

vis.js 기반의 DOM 중심 렌더링 구조로 인한 SSR 구현 불가 및 PDF 내보내기 제약 발생. 데이터 규모 증가에 따른 DOM 노드 과다 생성으로 인한 줌/스크롤 성능 저하 및 복잡한 Dependency 관계 표현의 한계 직면.

Technical Solution

브라우저 DOM 의존성을 완전히 제거한 Canvas 기반 렌더링 엔진 설계
Server-side Rendering 지원을 위한 Headless Browser 의존성 제거 및 예측 가능한 출력 구조 확보
Item 간의 관계(Dependency)를 1급 객체로 처리하는 로직 구현을 통한 복잡한 관계망 시각화 효율화
Canvas API를 통한 이미지 변환 프로세스 단순화로 리포트 생성 파이프라인 최적화
React의 선언적 UI 패턴과 상충하는 Imperative 코드를 최소화한 전용 라이브러리 Tempis 구축

실천 포인트

- 대량의 데이터 시각화 필요 시 DOM 노드 수와 렌더링 성능의 상관관계 분석 - SSR 및 파일 내보내기 요구사항 존재 시 DOM 기반 라이브러리보다 Canvas/SVG 기반 대안 검토 - 복잡한 상호 참조 관계(Dependency)가 포함된 데이터 모델의 시각화 전략 수립 - 프레임워크(React 등)의 라이프사이클과 외부 라이브러리의 명령형 제어 방식 간의 정합성 확인

태그

#Canvas #Data Visualization #Rendering Optimization #SSR #DOM-Bottleneck

원문 읽기