설명
써드파티의 자바스크립트 코드를 실행하고
데이터를 초기화하기 위한 컴포넌트이다.
이 컴포넌트가 포함된 페이지에 진입할 때
(SSR, CSR 관계없이 실행됨)
어떤 작업을 수행한다.
만약 SSR 페이지라면 페이작 서버에서 렌더링 될 때
데이터를 초기화 하는 데에 사용할 것이고,
CSR 페이지라면 클라이언트에서 로딩 될 때
특정 작업을 수행하도록 할 것이다.
_app.js 파일에도 포함 시킬 수 있지만
퍼포먼스에 불필요한 영향을 미칠 수 있기 때문에
next.js에서는 그 방법을 권하지는 않는다.
속성
src : 파일 경로 지정
strategy : 로드 전략 설정
- beforeInteractive : next.js의 코드나 페이지 hydration이 발생하기 이전에 로드 (페이지 초기 로딩. 로드 후 상호작용 준비)
- afterInteractive(default) : 페이지의 hydration이 발생하고 나서 로드 -> 상호작용 이후에 로드되고 실행됨 (주로 초기 페이지. 예를 들어 폼 유효성 검사)
- lazyOnload : 페이지 완전 로드된 후에 로드 (초기 로딩 관련 없을 때! 초기 페이지 로딩이 단축됨)
- (실험적) worker: 백그라운드 시 유용함. 오프라인 캐싱이나 푸시 알림 기능이랑 관련 되는 것
onLoad : 로드되면 실행할 함수
beforeInteractive 전략과는 사용이 불가능함.
스크립트 파일이 브라우저에 성공적으로 로드되면 > 호출
스크립트 파일에 추가적인 초기화 작업이 필요한 경우 사용함.
보통 이걸로 충분히 할 수 있음
onReady : 스크립트가 준비되면 실행할 함수
스크립트 파일이 브라우저에 로드되고 스크립트 내 모든 작업 완료, 페이지가 상호작용 가능한 상태 > 호출
페이지의 모든 요소가 초기화 및 상호작용 작업 완료된 후!
