목록Client/Next.js (1)
새발블로그
[Next.js] 동적 컴포넌트 로딩으로 분석 페이지 최적화
1. 문제 상황처음에는 분석 페이지에 필요한 모든 컴포넌트와 차트 라이브러리를 한 번에 import했습니다.종합/가스/전기 모든 탭의 차트가 초기 번들에 포함탭을 보지 않아도 모든 차트 컴포넌트가 준비될 때까지 기다려야 함결과적으로 첫 진입이 너무 느리고, 개발 서버 HMR도 둔감 // (Before) 전부 정적 로딩 — 첫 진입이 무거움import { ComposedChart, LineChart, BarChart, ... } from "recharts";// ...중략... {/* 이 안에서 바로 차트 그리기 */} ... ... ...2. 해결 방법: next/dynamic으로 탭 단위 분리차트가 들어있는 무거운 탭을 동적 import로 분리했습니다.ssr: false: 클라이언트 전용으로 실..
Client/Next.js
2025. 10. 7. 16:08