728x90
next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의
Script Optimization
레이아웃 스크립트
// next/script 를 가져오고 구성요소에 직접 포함
import Script from 'next/script';
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<section>{children}</section>
<Script src="https://example.com/script.js" />
</>
);
}
동일 레이아웃 내에선 한번만 로드됨.
애플리케이션 스크립트
모든 경로에 포함될려면 루트레이아웃에 포함함.
권장 : 성능에 불필요한 영향을 줄이기 위해 필요한 곳에서만 사용할 것
import Script from 'next/script';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
<Script src="https://example.com/script.js" />
</html>
);
}
전략(strategy)
- beforeInteractive: Next.js 코드 이전과 페이지 하이드레이션이 발생하기 전에 스크립트를 로드합니다.
- afterInteractive: (기본값) 스크립트를 일찍 로드하지만 페이지에 일부 하이드레이션이 발생한 후에 로드합니다.
- lazyOnload: 브라우저 유휴 시간 동안 스크립트를 나중에 로드합니다.
- worker: (실험적) 웹 워커에서 스크립트를 로드합니다.
<Script
src="https://example.com/script.js"
strategy="beforeInteractive"
/>
웹 워커에 스크립트 오프로드 (실험적)
- 아직 app 디렉토리에서 동작하지 않고 아직 안정적이지 않음
- next.config.js에서 nextScriptWorkers 플래그가 활성화된 경우에만 사용할 수 있습니다:
웹 워커 추가 설명 : https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API
실제로 피그마 플러그인 제작 시 사용됨.
인라인 스크립트
인라인 스크립트 또는 외부 파일에서 로드되지 않은 스크립트도 스크립트 컴포넌트에서 지원됩니다. 중괄호 안에 JavaScript를 배치하여 작성할 수 있습니다.
<Script id="show-banner">
{`document.getElementById('banner').classList.remove('hidden')`}
</Script>
또는 dangerouslySetInnerHTML 속성 사용
<Script
id="show-banner"
dangerouslySetInnerHTML={{
__html: `document.getElementById('banner').classList.remove('hidden')`,
}}
/>
Script에 id 속성이 있어야 nextjs가 추적할 수 있음
추가 코드 실행
- onLoad: 스크립트 로딩이 완료된 후 코드를 실행
- onReady: 스크립트 로딩이 완료된 후 컴포넌트가 마운트될 때마다 코드를 실행
- onError: 스크립트 로딩에 실패하면 코드를 실행
"use client"를 선언하고 next/script를 import 하여 사용
'use client';
import Script from 'next/script';
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
onLoad={() => {
console.log('Script has loaded');
}}
/>
</>
);
}
추가 속성
nonce 또는 사용자 정의 데이터 속성 등 <script> 요소에 할당할 수 있는 추가 속성이 있음.
import Script from 'next/script';
export default function Page() {
return (
<>
<Script
src="https://example.com/script.js"
id="example-script"
nonce="XUENAJFW"
data-test="script"
/>
</>
);
}
- nonce : CSP(컨텐츠 보안 정책)에서 XSS(Cross-site Scripting)을 방지하기 위해 사용 (잘 안 씀)
'공부공부 > Next.js 공식문서' 카테고리의 다른 글
| [next.js 공식문서] 20. Static Assets (0) | 2024.03.04 |
|---|---|
| [next.js 공식문서] 19. Metadata (0) | 2024.03.03 |
| [next.js 공식문서] 17. Server Actions (0) | 2024.03.01 |
| [next.js 공식문서] 16. Revalidating (0) | 2024.03.01 |
| [next.js 공식문서] 15. Caching (0) | 2024.03.01 |