Next.js Script 컴포넌트란?

---

• 서버 및 클라이언트에서 자바스크립트 코드를 실행하고 데이터를 초기화하는데 사용되는 개념이다. (서버측과 클라이언트측에서 둘 다 실행될 수 있음으로 SSR, CSR 모두 사용 가능)
  
• 해당 컴포넌트를 사용하면 서버에서 데이터를 미리 가져와 클라이언트로 전달하거나, 클라이언트 측에서 라우팅 또는 페이지 진입 시 특정 작업을 수행할 수 있다.

[기능1] 서버 사이드 데이터 로딩

페이지가 서버에서 처음 렌더링 될 때 데이터를 가져와 초기화하는데 사용. 예를 들어, getServerSide props 와 함께 사용해서 서버 사이드 데이터 로딩을 처리할 수 있다.

[기능2] 클라이언트 사이드 데이터 로딩

페이지가 클라이언트에서 로딩될 때 특정 작업 수행하도록 설정할 수 있다. 이를 통해 페이지 진입 시 데이터를 가져오거나 이벤트 핸들러 등을 등록 할 수 있다.

Next.js Script 컴포넌트 주요 속성

---

Next.js에서 스크립트, 외부 스크립트 로드하는데 실행이되고, 다양한 속성을 제공해서 스크립트의 동작을 개발자가 조절할 수 있다.

속성명(props)	설명	예시
src	로드할 스크립트 파일 경로 지정	src=”http://example.com/script”
strategy	스크립트 로드 전략 설정(언제 로드/ 실행하는지)	strategy=”lazyOnload”
onLoad	스크립트가 로드되면 실행할 함숫 지정	onLoad={onLoadFunc}
onReady	스크립트가 준비되면 실행할 함수 지정	onReady={onReadyFunc}
onError	스크립트 로드 중에 오류가 발생했을 때 실행할 함수 지정	onError={onErrorFunc}

strategy의 4가지 다른 전략

afterInteractive (기본값) : 스크립트가 페이지 상호 작용 가능한 상태 이후에 로드 되고 실행. 예를 들어, 페이지가 로드되고 사용자가 상호작용 할 수 있는 상태가 될 때.

beforeInteractive : 스크립트가 페이지가 상호 작용 가능한 이전에 로드되고 실행 (페이지가 초기 렌더링 시 필요한 스크립트들을 로드하고 해당 스크립트가 준비되면 페이지가 상호작용 가능한 상태로 전환이 된다.

lazyOnLoad : 스크립트가 페이지가 완전히 로드된 후에 로드되고 실행 (페이지 초기 로드 성능 향상, 필요한 스크립트 나중에 로드하기 때문에 초기 페이지 로딩 시간 단축 가능)

worker : 백그라운드 워커 스크립트를 로드하고 실행하는데 사용

참고 자료

---

https://nextjs.org/docs/app/api-reference/components/script#optional-props