필수 속성
src
•
외부 스크립트의 URL을 지정하는 경로 문자열 (절대 외부 URL 또는 내부 경로)
•
인라인 스크립트를 사용하지 않는 한 필수
선택 속성
beforeInteractive
•
스크립트가 서버에서 보내는 초기 HTML에 삽입 됨
•
내부 코드(Next.js 모듈)보다 먼저 다운로드 됨
•
페이지에 하이드레이션이 발생하기 전 배치된 순서대로 실행
•
스크립트가 실행되더라도 페이지 하이드레이션이 발생하는 것을 차단하지는 않음
(...)
Scripts denoted with this strategy are preloaded and fetched
before any first-party code,
but their execution does not block page hydration from occurring.
(...)
JavaScript
복사
[Question] 어떻게 가능한거죠?? (원래 스크립트 파싱이 DOM 생성을 block 하지 않나요?)
•
beforeInteractive 스크립트는 루트 레이아웃 배치(app/layout.tsx)
•
전체 사이트에 필요한 스크립트를 로드하도록 설계되어야 함
(즉, 애플리케이션의 페이지가 서버 측에서 로드될 때 스크립트가 로드됨)
beforeInteractive 전략은 페이지와 상호 작용하기 전에 가져와야 하는 중요한 스크립트에만 사용
// app/layout.tsx
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"
strategy="beforeInteractive"
/>
</html>
)
}
JavaScript
복사
[TIP] beforeInteractive 사용 시 항상 HTML 문서의 head에 삽입 됨 (컴포넌트 내 위치 무관)
[Example] beforeInteractive 사용 예시
•
봇 탐지기
•
쿠키 동의 관리자
afterInteractive
•
afterInteractive 스크립트는 HTML 클라이언트 측에 삽입
•
페이지에서 일부(또는 전체) 하이드레이션이 발생한 후 로드
•
next/script 컴포넌트의 기본 전략
•
가능한 한 빨리 로드해야 하지만 Next.js 코드 이후에 로드해야 하는 스크립트 대상
•
afterInteractive는 모든 페이지 또는 레이아웃 내부에 배치 가능
•
브라우저에서 해당 페이지(또는 페이지 그룹)가 열릴 때만 로드 및 실행
[Question] page group이 뭘까요? dynamic route?, 여러 컴포넌트?
import Script from 'next/script'
export default function Page() {
return (
<>
<Script src="https://example.com/script.js" strategy="afterInteractive" />
</>
)
}
JavaScript
복사
[Example] afterInteractive에 적절한 예
•
애널리틱스
lazyOnload
•
lazyOnload 사용 시 브라우저 유휴 시간 동안 HTML 클라이언트 측에 삽입
•
페이지의 모든 리소스를 가져온 후에 로드
•
일찍 로드할 필요가 없는 백그라운드 스크립트나 우선순위가 낮은 스크립트 대상
•
모든 페이지 또는 레이아웃 내부에 배치 가능
•
해당 페이지(또는 페이지 그룹)가 브라우저에서 열릴 때만 로드 및 실행
import Script from 'next/script'
export default function Page() {
return (
<>
<Script src="https://example.com/script.js" strategy="lazyOnload" />
</>
)
}
JavaScript
복사
[Example] lazyOnload에 적절한 예시
•
채팅 지원 플러그인
•
소셜 미디어 위젯
worker
내용 중복으로 상위 문서에 작성
