[Next] Script component

Script Component

script components는 HTML script 태그 익스텐션이고 서드파티 스크립트를 상황에 따라서 next 어플리케이션에서 어디에서든 사용할 수 있게 해주는 컴포넌트이다. 로딩 전략을 잘 활용해서 사용할 수 있다. 스크립트 컴포넌트에는 5가지 Props이 있는데 strategy, onLoad, onReady, onError , src 가 있다. 당연히 src는 필수고 나머지는 선택옵션이다.

strategy

• beforeInteractive: next.js 코드가 실행되기전, 그리고 하이드레이션이 시작되기전에 로드하고 싶을때 사용합니다. 봇이 감지되거나 동의관리 같이 페이지가 상호작용하기전 실행되야하는 스크립트를 실행할 때 사용합니다.(이 옵션은 script 컴포넌트가 선언된 위치와 상관없이 html head태그의 들어가게 되어있습니다.)
• afterInterective: (기본값) 하이드레이션 이후에 실행되는 즉 클라이언트 사이드가 포함된 스크립트일 때 사용합니다.
• lazyOnload: 웹페이지의 모든 소스들이 불러와진 다음에 실행되게 하는 옵션이므로 우선순위가 낮거나 일찍 로드 될 필요가 없는 스크립일 때 사용합니다.

onLoad

onLoad는 서버 컴포넌트가 아닌 클라이언트 컴포넌트에서만 사용할 수 있다. onLoad는 beforeInterective와 사용할 수 없고 대신 onReady를 사용하는 것을 권장한다.

일부 서드 파티 스크립트는 콘텐츠를 인스턴스화하거나 함수를 호출하기 위해 스크립트 로딩 후에 사용자가 JavaScript 코드를 한번만 실행할때 onLoad를 사용할 수 있다.. afterInteractive 또는 lazyOnload로 스크립트를 로드하는 경우, onLoad 속성을 사용하여 로드된 후에 코드를 실행할 수 있다.

onReady

일부 서드 파티 스크립트는 사용자가 스크립트가 로드 되었을 때 컴포넌트가 마운트 될때마다 자바스크립트 코드를 매번 실행해야 할 때 onReady를 사용할 수 있다.

onError

onError는 현재 서버 컴포넌트에서 작동하지 않으며, 클라이언트 컴포넌트에서만 사용할 수 있다. onError는 beforeInteractive 로딩 전략과 함께 사용할 수 없다.

스크립트 로딩이 실패할 때 onError를 사용하면 유리할 수 있다.