처음 만난 Next.js 문서
12.3
Scripts
이번에는 Next.js에서 Script를 최적화하는 방법에 대해 살펴보겠습니다. 참고로 여기서 말하는 Script는 원격 저장소에 위치한 JavaScript 파일을 의미합니다.
12.3.1 전체 애플리케이션에서 스크립트 로드
먼저 애플리케이션의 모든 route에 대해 서드파티 스크립트를 로드하고 싶을 경우에는 아래와 같이 Root Layout에서 next/script 패키지를 사용하여 스크립트를 직접 포함시키면 됩니다.
// app/layout.tsx
import Script from 'next/script';
interface RootLayoutProps {
children: React.ReactNode;
}
function RootLayout(props: RootLayoutProps) {
return (
<html lang='en'>
<body>{props.children}</body>
<Script src='https://example.com/script.js' />
);
}
export default RootLayout;
이 스크립트는 애플리케이션의 모든 route에 액세스할 때 로드되고 실행됩니다. 하지만 Next.js는 사용자가 여러 페이지 사이를 이동하더라도 스크립트가 한 번만 로드되도록 보장합니다. 이렇게 모든 route에 대해 서드파티 스크립트가 로드되도록 하면 어떤 route에서든 사용할 수 있다는 장점이 있지만, 해당 스크립트를 사용하지 않는 route에는 오히려 성능 저하의 요인이 될 수 있습니다. 그래서 성능에 영향을 최소화하기 위해 실제로 해당 스크립트를 사용하는 페이지나 레이아웃에만 서드파티 스크립트를 포함하는 것이 좋습니다.
12.3.2 특정 레이아웃에서만 스크립트 로드
특정 레이아웃에 속한 route에 대해서만 서드파티 스크립트를 로드하려면, 아래와 같이 레이아웃 컴포넌트에서 next/script패키지를 사용하여 스크립트를 직접 포함시키면 됩니다.
// app/admin/layout.tsx
import Script from 'next/script';
interface AdminLayoutProps {
children: React.ReactNode;
}
function AdminLayout(props: AdminLayoutProps) {
return (
<>
<section>{props.children}</section>
<Script
src='https://example.com/script.js'
strategy='lazyOnload'
onLoad={() => {
console.log('Third-party script loaded successfully');
}}
/>
</>
);
}
export default AdminLayout;
이렇게 하면 해당 폴더 경로(예: admin/page.ts) 또는 중첩된 경로(예: admin/settings/page.ts)에 사용자가 접근할 때에만 서드파티 스크립트가 로드됩니다. 그리고 이 때도 역시 Next.js는 사용자가 동일한 레이아웃 내에서 여러 경로를 탐색하더라도 스크립트가 한 번만 로드되도록 보장합니다.
NOTE. 스크립트 로딩 동작을 조정하려면 어떻게 해야할까?
next/script패키지에서는 아래와 같이strategy속성을 사용해서 스크립트 로딩 동작을 세밀하게 조정할 수 있음
beforeInteractive: 모든 Next.js 코드와 페이지 hydration이 발생하기 전에 스크립트를 로드afterInteractive(기본값): 페이지 hydration이 일부 발생한 후에 스크립트를 일찍 로드lazyOnload: 브라우저가 idle 상태일 때 스크립트를 나중에 로드worker(실험적): 스크립트를 Web Worker에서 로드
마지막 업데이트: 2025년 10월 24일 02시 48분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.