Next.js에서 외부(Third-party) javascript 불러오기
1. 메타데이터에 추가하기
<Head>
<title>First Post</title>
<script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>이 접근 방식은 효과가 있지만
이러한 방식으로 스크립트를 포함하면
동일한 페이지에서 가져온 다른 JavaScript 코드를 불러오는 시기가 불명확합니다.
특정 스크립트가 렌더링을 차단중이고 페이지 콘텐츠 로드를 지연시킬 수 있는 경우, 성능이 저하될 수 있습니다.
2. <Script> 태그 사용하기
// Script 태그 사용하기 위해 불러오기
import Script from "next/script"
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
)
}<Script> 태그 옵션
1. strategy
- javascript를 로드해야 하는 시기를 정합니다.
lazyOnload : 브라우저 대기 시간 동안, 스크립트를 느리게 로드하도록 Next.js 에 지시합니다.
2. onLoad
- 스크립트 로드가 완료된 직후 JavaScript 코드를 실행하는 데 사용됩니다.
이 예에서는 스크립트가 올바르게 로드되었다는 메시지를 콘솔에 기록합니다.
반응형
