무거운 컴포넌트는 동적 임포트 사용

Overview

Use next/dynamic to lazy-load large components not needed on initial render.

Impact

• Priority: CRITICAL
• Performance: directly affects TTI and LCP

Problem

Importing heavy components (editors, chart libraries, etc.) with regular imports includes them in the main bundle, significantly increasing initial load time.

Incorrect (Monaco bundles with main chunk ~300KB)

import { MonacoEditor } from "./monaco-editor"

function CodePanel({ code }: { code: string }) {
  return <MonacoEditor value={code} />
}

In this case, Monaco Editor loads even if the user never opens the code panel.

Correct (Monaco loads on demand)

import dynamic from "next/dynamic"

const MonacoEditor = dynamic(() => import("./monaco-editor").then((m) => m.MonacoEditor), { ssr: false })

function CodePanel({ code }: { code: string }) {
  return <MonacoEditor value={code} />
}

Key Points

• Split heavy components with dynamic imports
• Implement code splitting using next/dynamic
• Use { ssr: false } to exclude from server rendering
• Improves TTI (Time to Interactive) and LCP (Largest Contentful Paint)

Common Use Cases

• Editors (Monaco, CodeMirror, etc.)
• Chart libraries (Chart.js, Recharts, etc.)
• Maps (Google Maps, Mapbox, etc.)
• Markdown renderers
• PDF viewers

---

Tags: bundle, dynamic-import, code-splitting, next-dynamic