찰리의 이야기

Next.js Script Component 스크립트 컴포넌트 본문

찰리: 개발이야기(Engineering)

Next.js Script Component 스크립트 컴포넌트

쨜리 2021. 9. 29. 22:18
반응형

Nest.js Script Component 스크립트 컴포넌트

 

본 글은 Next.js 문서를 번역한 글입니다.

원글 : https://nextjs.org/docs/basic-features/script

오역이 있다면 알려주세요.

Script component 스크립트 컴포넌트

Next.js의 스크립트 컴포넌트는 개발자들이

third-party script 들의 로딩(loading) 우선순위를 설정할수 있어서

개발자의 시간을 절약하고 로딩 성능을 향상 시킬 수 있습니다.

 

웹사이트들은 종종 분석툴, 광고, 고객지원 위젯,

그리고 동의 관리 같은 것들을 위해 third-party script들을 필요로 합니다.

그러나, 이런 스크립트들은 로딩 성능에 부담을 주는 경향이 있고,

사용자 경험을 저하시킬 수 있습니다. 

개발자들은 최적의 로딩을 위해서 스크립트들을 어플리케이션

어디에 배치할지 결정하는데 어려움을 겪습니다.

 

'next/script' 를 사용하면, 'strategy'속성을 정의할 수 있고,

Next.js가 스크립트 로딩을 최적화합니다.

 

- 'beforeInteractive' : 봇이 감지하거나 동의 관리처럼 

그 페이지가 상호작용하기 전에 가져오고 실행되어야 할

필요가 있는 중요한 스크립트의 경우 사용합니다.

이 스크립트들은 서버의 초기 HTML에 삽입되어 

자체 번들 JavaScript가 실행되기 전에 실행됩니다.

 

- 'afterInteractive' (default) : 태그 매니저나 분석툴 처럼

해당 페이지의 상호작용 이후에 가져오고 실행되는 스크립트의 경우 사용합니다.

이 스크립트들은 클라이언트 사이드(client-side)에 삽입되어

hydration(정적 html에 이벤트 핸들러가 추가됨) 이후에 실행됩니다.

 

- 'lazyOnload' : 고객지원 챗이나 SNS 위젯처럼

유휴 시간동안 로드를 기다릴 수 있는 스크립트의 경우에 사용합니다.

 

주의 : 
- '<Script>' 는 'afterInteractive'와 'lazyOnload' 으로 인라인 스크립트를 지원합니다.
- '<Script>'로 감싸진 인라인 스크립트들은 스크립트를 추적하고 최적화하기 위해서 id 속성을 정의해야합니다.

 

사용법

이전에는 당신의 Next.js 'Head'내부에 'script' 태그를 정의해야 했습니다.

// Before

// pages/index.js
import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
        <script async src="https://www.google-analytics.com/analytics.js" />
      </Head>
    </>
  )
}

 

이제는 Next.js 페이지의 본문(body) 안에서 'next/script' 를 사용합니다.

이것은 'strategy'에 따른 원격 스크립트를 로드하는

시기와 방법을 결정하는 클라이언트 사이드(client-side) 기능(functinality)을 가집니다.

 

주의 :
- 'next/script' 는 'next/head' 컴포넌트나 'page/_document.js'에 위치해서는 안됩니다.

 

// After

// pages/index.js
import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://www.google-analytics.com/analytics.js" />
    </>
  )
}

 

사용 예시

설문 피드백 스크립트(Polyfills) 로딩

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script
        src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserverEntry%2CIntersectionObserver"
        strategy="beforeInteractive"
      />
    </>
  )
}

 

Lazy 방식 로딩(SNS)

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
      />
    </>
  )
}

 

로딩 이후 코드 실행('onLoad')

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script
        id="stripe-js"
        src="https://js.stripe.com/v3/"
        onLoad={() => {
          this.setState({ stripe: window.Stripe('pk_test_12345') })
        }}
      />
    </>
  )
}

 

인라인 스크립트

import Script from 'next/script'

<Script id="show-banner" strategy="lazyOnload">
  {`document.getElementById('banner').removeClass('hidden')`}
</Script>

// or

<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').removeClass('hidden')`
  }}
/>

 

속성 전달

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script
        src="https://www.google-analytics.com/analytics.js"
        id="analytics"
        nonce="XUENAJFW"
        data-test="analytics"
      />
    </>
  )
}

 

 

개인적으로 next.js 를 빌드 할때 

External synchronous scripts are forbidden. 오류를 만나서

관련된 문서를 번역 해보았습니다.

 

 

Nest.js Script Component 스크립트 컴포넌트

 

반응형
저작자표시

'찰리: 개발이야기(Engineering)' 카테고리의 다른 글

구글 스프레드시트 앱스크립트 체크박스 이메일 보내기  (8) 2022.05.20
구글 스프레드시트 앱스크립트 단체메일 개인화로 보내기  (0) 2022.04.25
Next.js 카카오맵 구현  (0) 2021.09.30
리액트웹으로 코르도바 안드로이드 앱 만들기(react cordova android)  (1) 2020.10.27
공유하기 링크
'찰리: 개발이야기(Engineering)' Related Articles more
Comments