docs

Appearance

비필수 서드파티 라이브러리 지연 로딩 ​

Overview ​

Analytics, logging, and error tracking don't block user interaction. Load them after hydration.

Impact ​

  • Priority: MEDIUM
  • Performance: loads after hydration

Problem ​

Tools like analytics or logging don't directly interact with users, but when loaded with regular imports, they're included in the initial bundle and increase load time.

Incorrect (blocks initial bundle) ​

tsx
import { Analytics } from "@vercel/analytics/react"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Correct (loads after hydration) ​

tsx
import dynamic from "next/dynamic"

const Analytics = dynamic(() => import("@vercel/analytics/react").then((m) => m.Analytics), { ssr: false })

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Key Points ​

  • Defer non-essential third-party libraries with dynamic imports
  • Exclude from server rendering with { ssr: false }
  • Apply to tools that don't immediately affect user experience
  • Reduces initial bundle size

Common Use Cases ​

  • Analytics tools (Google Analytics, Vercel Analytics, etc.)
  • Error tracking (Sentry, Rollbar, etc.)
  • Logging services
  • A/B testing tools
  • Chat widgets

Caution ​

Don't defer critical features (e.g., authentication, payments). It may harm user experience.

Tags: bundle, third-party, analytics, defer