Next.js 12 - Script Component & strategy & onLoad

Next.js 12

 

✅ Script Component란?

---

보통 프로젝트를 끝내고 나면 다른 웹 사이트하고 상호작용을 해야 한다.

(구글 애널리틱스를 사용하거나 페이스북 SDK를 설치하거나 페이스북 로그인이나 페이스북 광고를 추가할 수도 있고 카카오 JS SDK를 추가할 수도 있다.)

 

추가하는 가장 쉬운 방법은 SDK script를 복사한 다음에 _app.tsx에 붙여넣기 하는 것이다.

하지만 스크립트를 언제 어떻게 불러올지 정할 수가 없다.

 

이러한 문제를 해결하기 위해 Script Component를 사용한다.

 

✅ strategy prop의 3가지 종류

---

1. beforeInteractive -> 페이지를 모두 불러와 상호작용을 하기 전에 로딩

2. afterInteractive -> 페이지를 먼저 다 불러온 다음에 로딩

3. lazyOnload -> 모든 데이터나 소스들을 불러온 다음에 로딩

(밑으로 갈수록 느리게 로딩된다.)

<Script src="https://connect.facebook.net/en_US/sdk.js" strategy="lazyOnload"/>

 

 

✅ onLoad prop

---

Script Component의 prop

해당 prop에 함수를 넣어주면 스크립트가 모두 불러진 후에 해당 함수가 실행된다.

      <Script
        src="https://developers.kakao.com/sdk/js/kakao.js"
        onLoad={() => {
          window.fbAsyncInit = function () {
            FB.init({
              appId: "your-app-id",
              autoLogAppEvents: true,
              xfbml: true,
              version: "v13.0",
            });
          };
        }}
      />