Streamdown 1.6: LRU 캐시·레이지 로딩·커스텀 렌더러로 AI 스트리밍 마크다운 최적화

AI 스트리밍 마크다운 렌더링 라이브러리 Streamdown 1.6 이 출시됐다. memoization·LRU 캐싱·정규식 제거로 처리 속도를 높이고, React Suspense 레이지 로딩과 자체 마크다운 렌더러 도입으로 번들 크기를 줄였다. 정적 컨텐츠용 Static Rendering Mode 도 추가됐다.

핵심 포인트

memoization + LRU 캐싱 + 문자열 연산 최적화 + 정규식 패턴 제거로 처리 속도를 개선했다.
Code Blocks, Mermaid, Math 컴포넌트가 React Suspense 레이지 로딩으로 전환돼 필요할 때만 활성화된다.
React Markdown 의존성을 제거하고 자체 렌더러를 도입해 라이브러리 코어 footprint 를 줄이고 향후 최적화 경로를 직접 제어할 수 있게 됐다.
Static Rendering Mode 가 추가돼 블로그 포스트 등 정적 컨텐츠를 스트리밍 오버헤드 없이 처리할 수 있다.

상세 정리

성능 최적화: memoization 으로 반복 연산을 캐싱하고 LRU 캐시로 메모리 효율을 확보했다. 문자열 처리 최적화와 정규식 패턴 제거로 처리 시간을 단축했다.
레이지 로딩 적용: Code Blocks, Mermaid 다이어그램, Math 수식 컴포넌트가 React Suspense 를 활용해 해당 컨텐츠가 필요한 시점에만 로드된다.
코드 하이라이팅 재설계: 새로운 토크나이저 시스템으로 교체해 구현을 단순화하고 라인 번호 지원을 내장했다.
마크다운 렌더러 교체: React Markdown 의존성을 제거하고 자체 렌더러를 도입해 번들 크기를 줄이고 향후 최적화를 내부에서 제어 가능하게 됐다.
Static Rendering Mode: 스트리밍이 필요 없는 정적 마크다운을 스트리밍 오버헤드 없이 처리하는 모드다. 블로그 포스트나 정적 문서에 적합하다.
Mermaid 개선: 커스텀 에러 컴포넌트 지원, SVG/PNG 내보내기 기능, 줌·네비게이션 컨트롤이 있는 전체화면 뷰어가 추가됐다.
업그레이드: npm i streamdown@latest 한 줄로 적용 가능하다.

왜 읽나AI 스트리밍 출력을 마크다운으로 렌더링하는 앱에서 성능과 번들 크기를 개선하고 싶은 프론트엔드 엔지니어에게 구체적인 최적화 접근 방향을 제시하는 릴리즈 노트다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청