Nextjs에서 외부 스크립트 로드 상태 확인하는 법

1. 문제인식

Nextjs에서 Script의 로드 여부를 onLaod와 useState를 이용해 확인했더니 문제가 생겼다.

예를들면 아래와 같은 예제이다.

"use client";

import Script from "next/script";
import { useState } from "react";

export default function Page() {
  // useState로 스크립트 로드 확인
  // 스크립트가 로드되면 onLoad에서 scriptLoad 상태변경
  const [scriptLoad, setScriptLoad] = useState(false);
  return (
    <div>
      <Script
        src="https://example.com/sample.js"
        onLoad={() => setScriptLoad(true)}
      />
      {scriptLoad ? <div>로딩 완료!</div> : <div>로딩중!</div>}
    </div>
  );
}

이렇게 하면 최초에 컴포넌트가 마운트되고 스크립트가 로드 되면 scriptLoad의 상태가 false에서 true로 잘 변환된다.

문제는 한번 스크립트가 한번 로드되고 다시 컴포넌트가 마운트 될 때이다.

기본적으로 Script 컴포넌트는 한번 마운트 되고나면 사용자가 Nextjs 내의 여러 경로로 이동하더라도 단 한번의 스크립트 로드를 보장한다.

따라서 해당 페이지를 한번 방문 후, 재방문할 때 스크립트가 이미 로드되어 있으므로 useState의 상태가 변경되지 않는다.

2. onLoad 대신 onReady 사용하기

아무리 검색해도 해결방법을 찾을 수 없어서 Script 컴포넌트에 대한 Nextjs의 공식문서를 확인해 보았다.

Script 컴포넌트는 총 5개의 프롭을 받을 수 있다.

• src : 스크립트 경로

• strategy : 로딩 동장 미세 조정. 서버에서만 사용 가능.

• onLoad : 스크립트 로드가 완료된 후 실행

• onReady : 스크립트 로드가 완료되고 컴포넌트가 마운트 될 때마다 실행

• onError : 스크립트 로드가 실패하면 실행

이 중에서 나는 onLoad를 썼기 때문에 최초에 스크립트가 로드될 때만 상태변화가 일어났던 것.

그냥 간단하게 onLoad를 onReady로 바꾸면 해결된다.

...
export default function Page() {
...
      <Script
        src="https://example.com/sample.js"
        onReady={() => setScriptLoad(true)}
      />
...

3. 후기

이것 하나 때문에 몇 시간을 고민했는지 모르겠다.

AI를 통해 의문을 해결하려고 했으나, 클로드도 챗지피티도 모두 explore 시절의 코드를 말하며 헛소리만 해대니 답답했다.

옆에서 누군가 끌어주는 사람이 있었으면 좋겠다는 생각이 절실하게 드는 하루였다.