NextJS에서 카카오맵 SDK를 불러오는 방법은 다음과 같다.

const KAKAO_SDK_URL = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&libraries=services&autoload=false`;

// ... 생략

return (
  // ....
  <Script strategy="beforeInteractive" src={KAKAO_SDK_URL} />
)

그런데 어느 순간부터 script가 가져오지지 않았다. 다음과 같이 네트워크 탭에서 상태가 자꾸 취소됨으로 떴다.

어느 순간부터 갑자기 그런거라 원인을 파악하기 쉽지 않았다.

시도한 방법들

1. useEffect 사용

Script 태그를 useEffect를 이용하여 페이지가 로드 된 후에 가져오도록 해봤다. 역시나 실패다.

const [isLoading, setIsLoading] = useState(true);


useEffect(() => {
  setIsLoading(false);
}, [])


// ...

return <>{!isLoading && <Script ... /> </>

2. Script 태그에 각종 옵션 적용

NextJS에서 소개하는 Script 태그에 들어갈 수 있는 옵션들을 번갈아가면서 모두 적용해 보았다.

3. 기타...

이것 저것 주석처리해보고 다시 풀어보고 순서도 바꿔보고 열심히 노력했지만 결국 되지 않았다.

구글링에서 얻은 힌트

그러다 구글링 중 힌트가 될 수 있던 문서를 발견했다....

https://github.com/vercel/next.js/issues/49830

App Router에서 Script 태그에서 beforeInteractive 사용시 다른 옵션이 적용이 안된다는 문제가 있다는 이슈가 있었고, 누군가 이 문제를 1주일 전에 해결해서 PR을 날렸고, merge 되었다.

해당 Merge가 NextJS 14.1.0에 되어있길래 해당 버전을 쓰면 되지 않을까 해서 버전을 올려보았다. (현재 버전 14.0.4)

fix: <Script> with beforeInteractive strategy ignores additional attributes in App Router: #59779

버전 업

14.1.0 으로 버전을 올리고 yarn build를 해보니 기존에는 뜨지 않던 에러가 나왔다.

기존에 뜨지 않았었던 에러고, 이 에러를 무시할 수 있는 옵션이 있길래 일단 무시하고 시도해봤지만 역시 되지 않았다.

해결

그러나 에러는 괜히 내지 않는 법.. 저 에러를 해결해야 할 것 같았다.
우선 저 에러 메시지도 14.1.0에 추가된 메시지 였다.

feat(app-router): introduce experimental.missingSuspenseWithCSRBailout flag: #57642

NextJS에서 제공하는 문서를 보고 그대로 해결해 보았다.

useSearchParam을 사용하는 컴포넌트를 Suspense없이 사용하면 전체 페이지에 CSR을 하도록 영향을 준다는 것이었다.

그래서 당장 useSearchParam을 사용하는 컴포넌트를 Suspense로 감싸 주었다.

<Suspense>
  <Header />
</Suspense>

그랬더니 빌드 에러도 사라지고 SDK도 잘 불러와졌다..!!!

Suspense는 React 16.6에서 도입된 새로운 기능인데 비동기 통신이 끝날 때까지 렌더링을 일시중지 해준다고 한다..

배울게 여전히 많다.