Next.js 16 기반 Canvas 렌더링 최적화를 통한 LCP 및 UI 성능 개선

I Built a Free Brat Generator - Here's What I Learned About Next.js Performance published

Ibrat generator2026년 5월 21일4분intermediate

AI 요약

Context

Next.js 16 App Router와 vanilla TypeScript Canvas API를 활용한 고해상도 PNG 생성기 설계. Client-side 전용 Canvas 컴포넌트의 SSR 부재로 인한 Layout Shift 발생 및 잦은 상태 변경에 따른 Heap Churn 문제 직면.

Technical Solution

next/dynamic의 ssr: false 옵션을 통한 서버 사이드 렌더링 배제 및 Client-side 전용 렌더링 구조 설계
minHeight와 position: relative를 적용한 Wrapper Div 도입으로 LCP 요소의 공간을 사전 확보하여 Layout Shift 방지
Snapshot 생성 시 HTMLImageElement 신규 인스턴스 생성을 제거하고 Direct Reference Assignment 방식으로 변경하여 UI Thread Stutter 해결
React StrictMode의 이중 마운팅으로 인한 중복 이벤트 핸들러 방지를 위해 addEventListener 전 단계에서 removeEventListener를 수행하는 Cleanup 로직 적용
script-src와 connect-src를 분리하여 Microsoft Clarity의 서로 다른 서브도메인 요청을 허용하는 정밀한 CSP 헤더 구성
구조적 Routing 변경 시 .next 캐시 디렉토리 완전 삭제를 통한 TypeScript Validator 타입 불일치 해결

실천 포인트

1. Client-side 전용 컴포넌트 사용 시 LCP 최적화를 위해 반드시 최소 높이(minHeight)를 가진 Wrapper 설계

2. Canvas 상태 관리 시 DOM 요소의 반복적 생성 대신 참조값 복사를 통한 메모리 오버헤드 최소화

3. 글로벌 Event Listener 등록 시 StrictMode 대응을 위한 명시적 제거 로직 포함 여부 검토

4. CSP 설정 후 DevTools Network 탭을 통한 실제 서브도메인 요청 주소와 정책 일치 여부 검증

태그

#Memory Leak #Canvas API #CSP #LCP #Next.js

원문 읽기