next/script

Next.js에서 제공하는 next/script는 클라이언트 측 JavaScript를 로드하고 관리하는 방법을 제공합니다. 이는 웹 사이트의 성능에 큰 영향을 미치는 요소 중 하나입니다.

장점:

1. 성능 최적화: next/script를 사용하면 스크립트의 로딩 전략을 세부적으로 제어할 수 있습니다. strategy 속성을 사용하여 스크립트가 beforeInteractive, afterInteractive, lazyOnload 중 어떤 시점에 로드될 것인지를 지정할 수 있습니다. 이를 통해 페이지의 로딩 시간을 최적화하고 사용자 경험을 향상시킬 수 있습니다.

2. 간결한 API: next/script는 React 컴포넌트처럼 사용되므로, 복잡한 스크립트 관리를 간결한 API로 처리할 수 있습니다.

3. Defer and Async: next/script 컴포넌트는 JavaScript 파일을 비동기적으로 로드하고 HTML 파싱이 완료된 후에 실행되도록 하는 defer와 async 기능을 제공합니다.

단점:

1. 브라우저만 지원: next/script는 브라우저 환경에서만 동작합니다. 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)에서는 작동하지 않습니다.

2. 학습 곡선: next/script의 사용법과 특성을 이해하는데 약간의 시간이 필요할 수 있습니다. 특히 로딩 전략에 대한 이해가 필요합니다.

다음은 next/script의 사용 예시입니다:

import Script from 'next/script'

function MyComponent() {
  return (
    <>
      <Script src="https://www.google-analytics.com/analytics.js" strategy="afterInteractive" />
      {/* Other components... */}
    </>
  )
}

export default MyComponent

위 코드에서 next/script는 Google Analytics 스크립트를 로드하고 있습니다. strategy="afterInteractive" 속성은 스크립트가 페이지가 인터랙티브 상태가 된 후에 로드되도록 지정합니다. 이렇게 하면 스크립트 로딩이 페이지의 초기 로딩 시간에 영향을 미치지 않게 됩니다.