Next.js Script 컴포넌트 strategy 옵션 완전 정리

들어가기전

최근 개인 프로젝트 성능 개선을 위해 리소스를 lazyload 하는 것을 고려하다 next/script에 strategy라는 속성을 알게 되어 공부하고 정리했습니다.

본론으로

Script Tag 속성 defer, async

script 태그에서 속성으로 async defer이 존재합니다. 외부에서 파일을 가져올 때 사용하게 되며 로드하는 시점, 실행하는 시점이 다릅니다. defer 또는 async를 사용하는 것만으로도 시간 단축 효과를 볼 수 있습니다.

(다른 훌륭한 자료들이 많기 때문에 그림으로 대체)

NextJS에서는

nextjs에서 제공하는 next/Script는 script의 호출을 자유롭게 만들었습니다. 특히나 strategy라는 전략을 사용하게 되면 Component 어디에서 호출을 하더라도 명시적으로 타이밍을 결정할 수 있습니다.

strategy의 선택지는 아래와 같이 3가지를 공식문서에서 다음과 같이 설명합니다.

• beforeInteractive: Load before the page is interactive
• afterInteractive: (default) Load immediately after the page becomes interactive
• lazyOnload: Load during idle time

(https://nextjs.org/docs/basic-features/script#strategy)

beforeInteractive는 head에 위치하게 되며 속성으로 defer을 사용합니다. (inline script 사용안됩니다.)

  <!-- beforeInteractive -->
  <head>
    <script src="./script.js" defer data-nscript="beforeInteractive"></script>
  </head>

afterInteractive는 head에 위치하며 기본 script태그를 사용합니다. (inline script 사용가능)

  <!-- afterInteractive -->
  <head>
    <script src="./script.js" data-nscript="afterInteractive"></script>
  </head>

lazyOnload는 페이지 라이프사이클 load 이후에 발생하며 body태그 마지막에 추가되어집니다. (inline script 사용가능)

  <!-- lazyOnload -->
  <body>
    ...
    ...
    <script src="./script.js" data-nscript="lazyOnload"></script>
  </body>

마무리

NextJS에서 제공하는 Script를 사용해서 간편하고 명확하게 script를 로드할 수 있습니다. 특히나 analytics 관련 cdn 호출, 각종 플러그인, 소셜미디어 등 잘 고려해서 사용하면 좋을 것 같습니다.