서드파티 JavaScript
서드파티 JavaScript는 서드파티 출처에서 추가되는 모든 스크립트를 가리킵니다. 일반적으로 서드파티 스크립트는 분석, 광고 및 고객 지원 위젯과 같은 새로운 기능을 사이트에 도입하는 데 사용됩니다. 이러한 기능은 처음부터 작성할 필요 없이 사용할 수 있습니다.
서드파티 JavaScript 추가하기
Next.js 페이지에 서드파티 스크립트를 추가하는 방법에 대해 알아보겠습니다.
에디터에서 pages/posts/first-post.js 파일을 열고 다음 줄을 찾아보세요:
<Head>
<title>First Post</title>
</Head>
메타데이터 외에 가능한 빨리 로드하고 실행해야 하는 스크립트는 일반적으로 페이지의 <head> 내에 추가됩니다. 일반 HTML <script> 요소를 사용하여 외부 스크립트를 다음과 같이 추가할 수 있습니다:
<Head>
<title>First Post</title>
<script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>
이 스크립트에는 페이스북 SDK가 포함되어 있으며, 일반적으로 페이스북 소셜 플러그인 및 기타 기능을 도입하는 데 사용됩니다. 이 접근 방식은 작동하지만, 이러한 방식으로 스크립트를 포함하면 동일한 페이지에서 가져온 다른 JavaScript 코드와 비교하여 언제 로드될 것인지 명확히 알 수 없습니다. 특정 스크립트가 렌더링을 차단하고 페이지 콘텐츠가 로드되는 것을 지연시킬 수 있으므로 성능에 큰 영향을 미칠 수 있습니다.
Script 컴포넌트 사용하기
next/script는 HTML <script> 요소의 확장이며 추가 스크립트를 가져오고 실행하는 방식을 최적화합니다.
동일한 파일에서 파일 맨 위에 next/script에서 Script를 가져오는 import를 추가하세요:
import Script from 'next/script';
그런 다음 FirstPost 컴포넌트를 업데이트하여 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="/">← Back to home</Link>
</h2>
</>
);
}
위 Script 컴포넌트에 몇 가지 추가 속성이 정의된 것을 주목하세요:
- strategy는 서드파티 스크립트가 언제 로드되어야 하는지 제어합니다. lazyOnload 값을 사용하면 Next.js가 이 특정 스크립트를 브라우저의 유휴 시간에 게으르게 로드하도록 지시합니다.
- onLoad는 스크립트 로드가 완료된 직후에 즉시 JavaScript 코드를 실행하는 데 사용됩니다. 이 예제에서는 스크립트가 올바르게 로드되었다는 메시지를 콘솔에 기록합니다.
http://localhost:3000/posts/first-post에 접속해보세요. 브라우저의 개발자 도구를 사용하여 콘솔 패널에 위의 메시지가 기록된 것을 볼 수 있을 것입니다. 게다가 window.FB를 실행하여 스크립트가 이 전역 변수를 채웠는지 확인할 수 있습니다.
참고 : 페이스북 SDK는 성능적인 관점에서 서드파티 스크립트를 어떻게 추가하는지 보여주기 위해 가공된 예제에 사용되었습니다. 이제 Next.js에서 서드파티 기능을 포함하는 기본 개념을 이해했으므로, 다음 단계로 나아가기 전에 FirstPost에서 Script 컴포넌트를 제거할 수 있습니다.
Script 컴포넌트에 대해 더 알아보려면 문서를 확인하세요.
'Dev > Next JS' 카테고리의 다른 글
| [공식문서] NextJS - Assets, Metadata, and CSS #7 (0) | 2023.08.16 |
|---|---|
| [공식문서] NextJS - Assets, Metadata, and CSS #6 (0) | 2023.08.15 |
| [공식문서] NextJS - Assets, Metadata, and CSS #4 (0) | 2023.08.15 |
| [공식문서] NextJS - Assets, Metadata, and CSS #3 (0) | 2023.08.15 |
| [공식문서] NextJS - Assets, Metadata, and CSS #1 (0) | 2023.08.15 |
