추가하고자 하는 기능
전환 추적 코드 삽입
전환 추적 코드란? https://www.daangn.com/wv/faqs/10916
에러 상황
웹 사이트에 전환 추적 코드의 웹 스크립트를 삽입하려 하니 다음과 같은 에러가 발생했다.
오류 원인
Next.js에서는 최고의 퍼포먼스를 위해
<script> 태그 대신 next/head의 <Script>태그 사용하라고 한다.해당 태그는 1. 렌더링을 차단하는 리소스를 피하고2. 브라우저 기능을 활용하며3. 스크립트가 효율적으로 로드되도록 보장한다.이를 따르지 않으면 로딩 시강니 느려지고 프레임워크의 성능 이점이 사라질 수 있기 때문.
그냥 <script>를 사용하게 되면 소스를 로드하는 동안 HTML파싱이 중지되기 때문에 사용자 경험이 저하된다.
오류 해결 방법
next/script의 <Script>태그를 사용했다.
또한 js파일을 불러온 후 key값을 삽입하는 클라이언트 측 코드가 있었는데 js파일이 먼저 로드된 후 해당 스크립트가 실해되어야 하기 때문에 Script태그의 아래 "strategy"속성을 이용했다.
strategy
The loading strategy of the script. There are four different strategies that can be used:
- beforeInteractive: Load before any Next.js code and before any page hydration occurs.
- afterInteractive: (default) Load early but after some hydration on the page occurs.
- lazyOnload: Load during browser idle time.
- worker: (experimental) Load in a web worker.
JS파일 로드는 beforeInteractive속성을, 클라이언트 측 스크립트 코드는 afterInteractive 속성을 설정했다.
주의 :
<Script>는 afterInteractive와 lazyOnload으로 인라인 스크립트를 지원한다.
<Script>로 감싸진 인라인 스크립트들은 스크립트를 추적하고 최적화하기 위해서 id속성을 정의해야 한다.
하지만 이렇게 바꾸는 것만으로는 충분하지 않았는데 바로 사용 위치 때문!!
"next/script"는 "next/head"컴포넌트나 "page/_document.js"에 위치해서는 안된다!
"_document.tsx"의 <Head>태그 안에 Script태그를 사용 했는데 코드는 삽입 되었으나 클라이언트 측 코드는 정상적으로 작동하지 않았다.ㅜㅜ
<Script>코드를 _document가 아닌 _app에서 작성해야 하는 이유
- 서버 사이드 렌더링(SSR)과 클라이언트 사이드의 차이:
_document.js는 서버 사이드에서만 렌더링됨.
이 파일은 HTML 문서의 기본 구조를 정의하는 역할을 하며, 클라이언트 사이드 자바스크립트는 이 파일에 직접적으로 포함되지 않는다. next/script는 클라이언트 사이드에서 동작하는 스크립트 로딩을 최적화하는 도구로 설계되었기 때문에, 서버 사이드에서 실행되는 _document.js와는 맞지 않음! - 수명 주기와 실행 순서:
next/script는 클라이언트 사이드에서 동적으로 스크립트를 로드하고 실행 순서를 관리하는 데 사용됨.
_document.js는 HTML 문서의 <html> 및 <body> 태그와 같은 기본적인 구조를 설정하는 곳.
여기서 next/script를 사용하면, 클라이언트 사이드에서 스크립트 로딩이 의도한 대로 동작하지 않을 수 있다.
예를 들어, 스크립트가 제대로 로드되지 않거나, 순서가 어긋날 수 있음. - Next.js의 최적화 기능:
Next.js는 성능 최적화를 위해 next/script를 특정한 방식으로 처리함.
이 최적화 기능은 _document.js에서는 작동하지 않기 때문에, 이 파일에서 next/script를 사용하면 이러한 최적화 기능을 활용할 수 없음. next/script를 올바르게 사용하기 위해서는 pages/_app.js나 개별 페이지 컴포넌트에서 사용하는 것이 좋음.
<Script>코드를 <Head> 가 아닌 <Body>에 작성해야 하는 이유
next/script와 next/head는 모두 Next.js에서 성능 최적화 및 메타데이터 관리를 위해 제공하는 도구.
두 가지는 각각의 역할이 있으므로, 이를 혼동하지 않는 것이 중요
next/head
next/head는 HTML <head> 태그 내에서 메타데이터를 관리하기 위해 사용.
여기에는 <title>, <meta>, <link>와 같은 태그들이 포함. 이를 통해 각 페이지의 메타데이터를 설정.
next/script
next/script는 스크립트 로딩을 최적화하기 위해 사용. 이
를 통해 스크립트의 로드 순서를 제어하고, defer, async 등의 속성을 쉽게 설정.
next/script를 next/head 내에서 사용 가능한가?
next/script를 next/head 내에서 사용하는 것은 일반적으로 권장되지 않음. next/script는 클라이언트 사이드에서 스크립트 로딩을 관리하고 최적화하는 역할을 하기 때문에, 이를 next/head 내에 사용하면 의도한 동작을 보장할 수 없음
올바른 사용 방법:
- next/head는 메타데이터와 스타일 시트를 관리하는 데 사용하고,
- next/script는 페이지 또는 컴포넌트 레벨에서 클라이언트 사이드 스크립트를 로드하는 데 사용..
결론
"next/script"는 본문<body>안에서 작성해야 하며, strategy 속성으로 스크립트를 로드하는 시기와 방법을 결정하는 클라이언트 사이드 기능을 가진다.
최종 적용 코드
//_app.tsx
<Script id="ad" strategy="beforeInteractive" src={process.env.NEXT_PUBLIC_AD} />
<Script
id="ad-init"
dangerouslySetInnerHTML={{
__html: `document.getElementId("ad").classList.add("hidden");`,
}}
/>
'Trouble-Shooting' 카테고리의 다른 글
| [React] KaKao map 마커 표시 할 때 흰 화면만 나오는 경우 (0) | 2024.04.04 |
|---|---|
| [React] 로그인 유무에 따른 페이지 접근제한(feat. PrivateRoute) (0) | 2024.01.10 |
| 몰랐던 useEffect의 실행순서(feat 유저 로그인 유무 판단) (2) | 2023.12.26 |
