naver map api를 사용하게 되었다.
naver 지도 api 공식문서
NAVER 지도 API v3이 로드되는 동안 나머지 웹 사이트를 렌더링하는 비동기 방식으로 사용하려면 다음과 같이 callback 파라미터를 이용해 콜백 함수를 지정합니다. NAVER API v3이 준비되면 지정한 콜백 함수를 호출합니다.
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&callback=CALLBACK_FUNCTION"></script>
이런 스크립트를 third-party scripts라고 불린다.
third-party script를 어떻게 사용해야할지 찾던 중 next.js의 Script 컴포넌트를 찾게 되었다.
next.js의 Script 컴포넌트 공식문서를 통해 어떻게 사용해야하는 지 분석해보자
next/script
https://nextjs.org/docs/pages/api-reference/components/script
스크립트 최적화
https://nextjs.org/docs/app/building-your-application/optimizing/scripts
layout에 Script 코드를 사용하면 next.js에서 스크립트를 로드해준다.
중요한 것은 next.js에서 같은 레이아웃을 사용하는 여러 경로를 움직이더라도 스크립트가 한번만 로드되도록 보장한다는 것이다.
즉 루트 레이아웃에서 임포트한 경우, 모든 경로에 대해서 script를 한번만 로드하도록 보장해준다.
그러면 루트레이아웃에 script를 임포트하면 되는 거 아닌가 생각해봤는데, 불필요한 영향을 줄 수도 있기 때문에 특정 레이아웃 또는 페이지에만 스크립트를 임포트하는 것을 권장한다고 한다
strategy
실험적인 기능을 빼면 3개의 전략이 있다.
| 로딩 전략 | 설명 |
|---|---|
| beforeInteractive | 모든 Next.js 코드와 페이지 하이드레이션이 발생하기 전에 로드됩니다. |
| afterInteractive | (기본값) 초기 하이드레이션 후에 로드됩니다. |
| lazyOnload | 브라우저 유휴 시간 동안 로드됩니다. |
beforeInteractive
next.js에서 초기 html을 보낼대 script가 같이 삽입되어서 하이드레이션 과정 이전부터 script가 로딩되고 수행되도록 하는 전략이다.
최적화 파트에서는 루트레이아웃에서 Script 불러오지 말라고 했는데, beforeInteractive 전략은 사이트 내 전체 페이지에 필요한 중요한 스크립트가 로드되도록하는 옵션으로, 루트레이아웃에서 사용하는 것을 상정하고 설계되었다고 한다.
봇탐지기, 쿠키 동의 관리자 같은 써드파티 스크립트로를 이 전략으로 로딩할 수 있다.
한가지 중요한 것은 naver map api는 beforeInteractive로 로딩할 필요가 없다는 것이다
afterInteractive와
nextjs Script 컴포넌트의 기본 전략이다. 하이드레이션 이후에 script가 로드되도록 하는 전략이다.
페이지, 레이아웃 어디서나 배치할 수 있으며 해당 페이지를 열때만 로드된다
lazyOnload
페이지의 모든 리소스가 페치된 뒤에 로드된다.
초기에 로드할 필요가 없는 백그라운드, 저우선 순위 스크립트를 위한 전략이다
지도 API를 로딩하기 위해서는 어떤 전략을 선택해야하는가?
일단 beforeInteractive를 사용하지 말아야한다는 것은 잘 알겠다.
afterInteractive와 lazyOnload 중 무엇을 선택해야할까?
chatgpt한테 물어봤더니 다음과 같이 설명하고 있다
즉시 보여줘야하는 지도
- 사용자가 페이지에 들어오자마자 지도가 보여야하는 경우, 지도 api의 빠른 로딩이 필요함
- 하이드레이션 이후 바로 스크립트를 로딩 후 실행하도록 조치
사용자 행동에 따라 조건부로 보여주는 지도 (예: 탭 전환, 버튼 클릭 후)
- 페이지 진입 시점에는 지도가 필요 없고, 특정 버튼 클릭 또는 탭 이동 시점에만 지도를 로드/표시하는 경우
- 지도 api가 무겁기 때문에 초기 로딩 속도를 최적화
내 프로젝트에서는 페이지 들어가자마자 지도가 보이는 것을 원하기 때문에 afterInteractive를 선택했다.
lazyOnload가 필요한 경우에 대해서도 차후에 공부해봐야하겠다
onLoad, onReady, onError
onLoad, onReady, onError는 모두 클라이언트 컴포넌트에서만 사용이 가능하다
| 비교 | 설명 |
|---|---|
| onLoad | 스크립트가 로드된 뒤 딱 한번만 실행됨 |
| onReady | 스크립트가 로드된 뒤 딱 한번만 실행됨 + 컴포넌트가 다시 마운트될 때마다 코드를 실행한다 |
| lazyOnload | 스크립트가 로드되지 않았을 때 사용 |
공식 문서에서는 google map api를 사용할 때 onReady를 사용한다.
onLoad와 onReady를 사용해본 결과 페이지를 계속해서 이동해도 onLoad는 한번만 실행된다.
