[ Optimizing ] Scripts

차차·2023년 5월 23일
0

Next Docs

목록 보기
27/34
post-thumbnail

레이아웃 스크립트

여러 경로에 대해 타사 스크립트를 로드하려면 next/script를 가져오고 스크립트를 직접 레이아웃 컴포넌트에 포함시킨다.

// app/dashboard/layout.tsx

import Script from 'next/script';
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  );
}

사용자가 폴더 경로 (예: dashboard/page.js) 또는 중첩된 경로 (예: dashboard/settings/page.js)에 액세스할 때 타사 스크립트가 가져온다. Next.js는 동일한 레이아웃에서 여러 경로를 탐색하더라도 스크립트가 한 번만 로드되도록 보장한다.



애플리케이션 스크립트

모든 경로에 대해 타사 스크립트를 로드하려면 next/script를 가져오고 스크립트를 직접 루트 레이아웃에 포함시킨다.

// app/layout.tsx

import Script from 'next/script';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script src="https://example.com/script.js" />
    </html>
  );
}

이 스크립트는 애플리케이션의 모든 경로에 액세스할 때 로드되고 실행된다. Next.js는 사용자가 여러 페이지 사이를 이동하더라도 스크립트가 한 번만 로드되도록 보장한다.

성능에 불필요한 영향을 최소화하기 위해 타사 스크립트를 특정 페이지나 레이아웃에만 포함하는 것을 권장한다.



전략 (Strategy)

next/script의 기본 동작은 페이지나 레이아웃에서 타사 스크립트를 로드할 수 있게 해준다. 그러나 strategy 속성을 사용하여 로딩 동작을 세밀하게 조정할 수 있다.

  • beforeInteractive : Next.js 코드 및 페이지 하이드레이션 전에 스크립트를 로드한다.

  • afterInteractive : (기본값) 일부 하이드레이션 이후에 스크립트를 조기에 로드한다.

  • lazyOnload : 브라우저 idle time에 스크립트를 늦게 로드한다.

  • worker : (실험적 기능) 웹 워커에서 스크립트를 로드한다.



스크립트를 웹 워커로 오프로드 (실험적 기능)

워커 전략은 아직 안정적이지 않으며 app 디렉토리와 함께 작동하지 않는다. 주의하여 사용해야한다.

워커 전략을 사용하는 스크립트는 Partytown과 함께 웹 워커에서 오프로드되고 실행된다. 이를 통해 메인 스레드를 애플리케이션 코드의 나머지 부분에 할당하여 사이트의 성능을 향상시킬 수 있다.

이 전략은 여전히 실험적이며 next.config.js에서 nextScriptWorkers 플래그가 활성화된 경우에만 사용할 수 있다.

// next.config.js

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
};

그런 다음 next를 실행한다. (보통 npm run dev 또는 yarn dev). 그러면 Next.js가 필요한 패키지를 설치하기 위한 안내를 제공한다.

npm run dev

다음과 같은 지침을 볼 수 있다 : npm install @builder.io/partytown 명령을 실행하여 Partytown을 설치한다.

설정이 완료되면 strategy="worker"를 정의하면 Partytown이 자동으로 애플리케이션에 인스턴스화되고 스크립트가 웹 워커로 오프로드된다.

// pages/home.tsx

import Script from 'next/script';
 
export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  );
}


인라인 스크립트

스크립트 구성 요소는 외부 파일에서 로드되지 않는 인라인 스크립트도 지원한다. 중괄호({}) 안에 JavaScript를 작성하여 사용할 수 있다.

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

또는 dangerouslySetInnerHTML 속성을 사용하여 작성할 수도 있다.

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

Next.js가 스크립트를 추적하고 최적화하기 위해 인라인 스크립트에는 id 속성을 할당해야 한다.



추가 코드 실행 (Executing Additional Code)

이벤트 핸들러를 Script 컴포넌트와 함께 사용하여 특정 이벤트가 발생한 후에 추가 코드를 실행할 수 있다.

  • onLoad : 스크립트가 로드된 후에 코드를 실행한다.

  • onReady : 스크립트가 로드된 후와 컴포넌트가 마운트될 때마다 코드를 실행한다.

  • onError : 스크립트 로드에 실패한 경우에 코드를 실행한다.


이러한 핸들러는 next/script가 가져와지고 "use client"가 코드의 첫 번째 줄로 정의된 클라이언트 컴포넌트 내에서만 작동한다.



추가 속성 (Additional Attributes)

Script 컴포넌트에서 사용되지 않는 nonce나 사용자 정의 데이터 속성과 같은 여러 DOM 속성을 <script> 요소에 할당할 수 있다. 추가 속성을 포함하면 최종으로 최적화된 <script> 요소로 자동으로 전달된다.

// app/page.tsx

import Script from 'next/script';
 
export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  );
}


[ 출처 ]
https://nextjs.org/docs/app/building-your-application/optimizing/scripts

profile
나는야 프린이

0개의 댓글