들어가며
프로젝트 성능 개선의 일환으로 <script> 태그를 이용하여 Kakao Javascript SDK Script를 사용하던 부분을 next/script 컴포넌트를 사용하도록 바꾸고 lazyOnload을 적용하고자 하였습니다.
그리고 해당 스크립트를 깔끔하게 next/head 안에 넣어두고 테스트 서버에 배포하였는데... (사실 next/head 안에 넣은 것은 공식 문서에서 제공하는 형태를 최대한 가져가고자 하였습니다.)
오잉..? <head> 태그 안에 해당 script가 들어가지 않는 모습을 볼 수 있었습니다. next/head가 아닌 다른 곳에 next/script를 위치시키자 바로 문제가 해결 되었습니다.
무엇이 문제일까?
(참고: next/script 뿐만 아닌 script 역시 head 태그 안에 들어가지 않았습니다)
문제가 생겼을 때, 가장 먼저 살펴본 것은 공식 문서였습니다. 현재 저의 프로젝트에서 사용 중인 page router, 14 버전으로 필터링을 하여 next/head에 대하여 찾아보았습니다.
하지만 공식 문서에서 script 사용이 불가하는 말은 없었습니다. 제가 찾을 수 있던 것은 script 대신 next/script 사용을 권장한다는 문구 뿐...
불행 중 다행인 것은 저와 같은 문제를 겪는 다른 개발자들을 찾아볼 수 있었습니다.
https://github.com/vercel/next.js/issues/59325
https://github.com/vercel/next.js/issues/52560
현재로는 무엇이 문제인지 정확히 파악되지 않은 상태 😞
Next.js는 오픈 소스 프로젝트이며 현재 많은 사람들이 관심을 가지는 프레임워크인 만큼, 버전이 바뀔 때마다 많은 기능들이 바뀌는 걸 보았습니다. 실제로 릴리즈 노트에는 기재되지 않았지만 13에서 14로 올라오면서 개발 환경에서의 캐싱 정책이 바뀐 것을 포스팅으로 다룬 바가 있었죠.
시간이 남을 때, 버전을 next/head, next/script를 지원하는 최소 버전으로 낮춰본 다음, 버전 업그레이드 과정에서 호환이 제대로 안되는 것은 아닌지 확인해보고자 합니다. 정확한 원인 파악이 완료되면 추가 포스팅으로 작성해보도록 하겠습니다.
'Web' 카테고리의 다른 글
| [Webview] foreground, background 전환 감지하기 (0) | 2024.12.02 |
|---|---|
| [Web] 웹 페이지 성능 개선을 위한 도구 Lighthouse 알아보기 (0) | 2024.11.18 |
| [Next.js] 14 버전 favicon(파비콘) 미적용 에러 해결하기 (0) | 2024.09.11 |
| [TanStack Query] TanStack Query(React Query)의 stale time과 cache time은 무엇일까? (0) | 2024.08.05 |
| [HTML/CSS] "Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>." 경고 해결하기 (2) | 2024.07.14 |
