[Next.js] Script & Strategy

Next.js로 프로젝트를 진행하며 지도 기반 기능을 구현하기 위해 Map API를 활용하는 기획을 세웠다. 이 과정에서 Next.js의 <Script> 컴포넌트를 사용해 외부 스크립트를 로드해야 했고, 특히 strategy 속성을 알게 되었다. strategy 속성은 스크립트 로드 시점과 방식을 세부적으로 제어할 수 있는 강력한 도구로, 성능 최적화와 사용자 경험 개선에 중요한 역할을 하였다. 이에 <Script> 컴포넌트와 strategy 속성의 활용법을 체계적으로 정리하고 공유하기 위해 이 글을 작성하게 되었다.

 

 

01. Script

Next.js에서 <Script>는 페이지 로딩 성능을 최적화하면서 외부 스크립트를 효율적으로 로드할 수 있도록 돕는 컴포넌트이다.

기본적으로 스크립트를 로드할 시점을 제어하며, 다양한 로드 전약을 통해 성능을 향상할 수 있다.

 

<Script>사용 예시와 주요 props는 다음과 같다.

import Script from 'next/script';
 
export default function Dashboard() {
  return (
    <>
      <Script src="https://example.com/script.js" />
    </>
  );
}

 

 

💡<Script>의 주요 Props

• src : 외부 스크립트 URL (필수)
• strategy : 스크립트 로드 전략 (선택)
• onLoad : 스크립트 로드 완료 후 실행할 콜백 함수 (선택)
• onReady : 스크립트 로드 후 및 컴포넌트 재마운트 시 실행할 콜백 함수 (선택)
• onError : 스크립트 로드 실패시 실행할 콜백 함수 (선택)

 

 

 

 

02. strategy : 스크립트 로드 전략

strategy는 스크립트를 언제, 어떻게 로드할지를 결정한다.

 

◼︎ beforeInteractive

Next.js 코드와 페이지 Hydration 전에 로드되며, app/layout.tsx에서만 사용 가능하다.

사이트 전체에서 필요한 스크립트일 경우 사용하는 것이 좋다.

<Script src="https://example.com/script.js" strategy="beforeInteractive" />

 

 

◼︎ afterInteractive (기본값)

초기 하이드레이션 이후 로드되며, 어떤 페이지나 레이아웃에서도 사용 가능하다.

<Script src="https://example.com/script.js" strategy="afterInteractive" />

 

 

◼︎ lazyOnload

브라우저가 유휴 상태일 때 로드되며, 어떤 페이지나 레이아웃에서도 사용 가능하다.

페이지 로드 우선순위가 낮은 스크립트일 경우 사용하는 것이 좋다.

<Script src="https://example.com/script.js" strategy="lazyOnload" />

 

 

◼︎ worker

Web Worker에서 로드하여 메인 스레드 부하가 감소한다.

next.config.js에서 설정이 필요하며, app 디렉토리에서는 미지원한다.

<Script src="https://example.com/script.js" strategy="worker" />

 

 

 

 

03. 추가 Props 사용법

◼︎ onLoad

스크립트가 로드된 후 실행되며, beforeInteractive와는 호환되지 않는다.

'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
        onLoad={() => {
          console.log(_.sample([1, 2, 3, 4]))
        }}
      />
    </>
  )
}

 

 

◼︎ onReady

스크립트 로드 후 및 컴포넌트 재마운트 시 실행된다.

Server Component에서는 사용할 수 없다.

import { useRef } from 'react';

const mapRef = useRef();

<Script
  id="google-maps"
  src="https://maps.googleapis.com/maps/api/js"
  onReady={() => {
    new google.maps.Map(mapRef.current, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  }}
/>;

 

 

◼︎ onError

스크립트 로드 실패 시 실행되며, beforeInteractive와는 호환되지 않는다.

<Script
  src="https://example.com/script.js"
  onError={(e) => console.error('Script failed to load', e)}
/>

 

 

---

References

https://nextjs.org/docs/app/api-reference/components/script

Components: <Script> | Next.js