nextjs/no-before-interactive-script-outside-document 정확성
작동 방식
pages/_document.js 외부에서 next/script의 beforeInteractive 전략을 사용하는 것을 방지합니다.
이 규칙은 beforeInteractive 로딩 전략을 가진 스크립트가 가장 효과적인 위치인 문서 컴포넌트 내에서만 사용되도록 보장합니다.
왜 좋지 않은가?
beforeInteractive 전략은 페이지 하이드레이션 발생 전에 스크립트를 로드하도록 특별히 설계되었으며, 이는 오직 pages/_document.js 내에 배치될 때만 정확하게 작동함이 보장됩니다. 다른 곳에서 사용하면:
- 원하는 조기 로딩 동작을 달성할 수 없음
- 일관되지 않은 스크립트 로딩 시점 발생 가능
- 하이드레이션 불일치 또는 기타 런타임 문제 유발 가능
- 애플리케이션의 성능 최적화에 부정적 영향을 미칠 수 있음
예시
이 규칙에 잘못된 코드 예시:
jsx
// pages/index.js
import Script from "next/script";
export default function HomePage() {
return (
<div>
<Script
src="https://example.com/script.js"
strategy="beforeInteractive" // ❌ 잘못된 위치
/>
</div>
);
}이 규칙에 올바른 코드 예시:
jsx
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Script
src="https://example.com/script.js"
strategy="beforeInteractive" // ✅ 올바른 위치
/>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;사용 방법
구성 파일이나 명령줄 인터페이스에서 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-before-interactive-script-outside-document": "error"
}
}bash
oxlint --deny nextjs/no-before-interactive-script-outside-document --nextjs-plugin