이 페이지는 Cloud Translation API를 통해 번역되었습니다.

서드 파티 라이브러리 관리를 위한 Next.js 패키지

Houssein Djirdeh

2021년, Chrome Aurora팀은 스크립트와 구성요소를 사용하여 로드 성능을 향상할 수 있습니다. 출시 이후 서드 파티 리소스를 더 쉽게 로드하고 개발 속도를 높일 수 있습니다.

이 블로그 게시물에서는 Google에서 출시한 최신 기능을 특히 @next/third-parties 하고 로드맵에 있는 향후 이니셔티브에 대한 개요를 제공합니다.

서드 파티 스크립트의 성능에 미치는 영향

Next.js 사이트의 모든 서드 파티 요청의 41%는 스크립트입니다. 다른 콘텐츠 좋아요 표시 스크립트를 다운로드하고 실행하는 데 상당한 시간이 걸릴 수 있으므로 렌더링이 차단되고 사용자 상호작용이 지연될 수 있습니다. Chrome의 데이터 사용자 환경 보고서 (CrUX)에 따르면 서드 파티를 더 많이 로드하는 Next.js 사이트는 스크립트의 다음 페인트에 대한 상호작용이 더 적음 (INP) 및 최대 콘텐츠 페인트 (LCP) 통과율

로드된 서드 파티 수에 비례하여 좋은 INP 및 LCP 점수를 달성한 Next.js의 비율이 감소하는 것을 보여주는 막대 그래프 — </ph> 2023년 12월 CrUX 보고서 (사이트 110,823개)

이 차트에서 관찰된 상관관계는 인과관계를 암시하지 않습니다. 하지만 실험을 통해 서드 파티 스크립트가 이러한 문제를 상당 부분 해소할 수 있다는 페이지 성능에 영향을 미칩니다. 예를 들어 아래 차트에서는 Google 태그 관리자 컨테이너(임의로 18개)의 측정항목을 선별하여 측정항목을 표시합니다. 태그 — 인기 Next.js 예제인 Taxonomy에 추가됩니다. 있습니다.

Google 태그 관리자를 사용하거나 사용하지 않고 사이트를 로드할 때 다양한 실험실 측정항목의 차이를 보여주는 막대 그래프 — </ph> WebPageTest (모바일 4G - 미국 버지니아)

WebPageTest 문서 는 이러한 타이밍을 측정하는 방법에 대한 세부정보를 제공합니다. 간단히 보면 모든 실험실 측정항목이 GTM 컨테이너의 영향을 받는다는 점을 명확히 밝혔습니다. 대상 예를 들어 총 차단 시간 (TBT)과 같이 INP에 근접한 프록시는 거의 20배 증가했습니다.

스크립트 구성요소

Next.js에 <Script> 구성요소를 제공할 때 기존의 <script>와 매우 유사한 사용자 친화적인 API를 통해 요소가 포함됩니다. 이 도구를 사용하여 개발자는 서드 파티 스크립트를 구성요소를 연결하고, Next.js가 스크립트를 다시 실행합니다.

<!-- By default, script will load after page becomes interactive -->
<Script src="https://example.com/sample.js" />

<!-- Script is injected server-side and fetched before any page hydration occurs -->
<Script strategy=”beforeInteractive” src="https://example.com/sample.js" />

<!-- Script is fetched later during browser idle time -->
<Script strategy=”lazyOnload” src="https://example.com/sample.js" />

다음과 같은 인기 사이트를 비롯하여 수만 개의 Next.js 애플리케이션 Patreon, Target, 개념: <Script> 구성요소를 사용합니다. 그럼에도 불구하고 일부 개발자는 다음 항목에 관해 우려를 제기했습니다. 있습니다.

준수하면서 Next.js 앱에서 <Script> 구성요소를 배치할 위치 타사 서비스 제공업체의 설치 안내에 따라 다릅니다. (개발자 환경).
다양한 목표에 가장 적합한 로드 전략은 무엇인가요? 서드 파티 스크립트(사용자 환경).

이 두 가지 문제를 해결하기 위해 Google은 @next/third-parties—a 최적화된 구성요소 및 유틸리티 세트를 제공하는 특수 라이브러리 게재할 수 있습니다

개발자 환경: 서드 파티 라이브러리를 더 쉽게 관리

많은 서드 파티 스크립트가 Next.js 사이트의 상당 부분에서 사용되고 있으며 Google 태그 관리자가 가장 널리 사용되며, 각각 66% 의 사이트가 지원됩니다. @next/third-parties는 <Script> 위에 빌드됩니다. 래퍼의 사용을 단순화하도록 고안된 더 높은 수준의 래퍼를 도입하여 살펴보겠습니다

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  );
}

Google 애널리틱스—널리 사용되는 서드 파티 스크립트 (Next.js 사이트의 52%)에도 자체 전용 구성요소가 있습니다.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  );
}

@next/third-parties는 흔히 사용되는 스크립트를 로드하는 프로세스를 간소화합니다. 또한 다른 서드 파티 공급업체를 위한 유틸리티를 개발하는 역량을 카테고리(예: 퍼가기) 예를 들어 Google 지도 및 YouTube 삽입 동영상은 사용 대상 8% 및 4% Next.js 웹사이트의 코드를 하나씩 제공하고 있으며, 더 쉽게 로드할 수 있습니다.

import { GoogleMapsEmbed } from "@next/third-parties/google";
import { YouTubeEmbed } from "@next/third-parties/google";

export default function Page() {
  return (
    <>
      <GoogleMapsEmbed
        apiKey="XYZ"
        height={200}
        width="100%"
        mode="place"
        q="Brooklyn+Bridge,New+York,NY"
      />
      <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
    </>
  );
}

사용자 환경: 서드 파티 라이브러리 로드 속도 향상

완벽한 환경에서는 널리 채택되는 모든 서드 파티 라이브러리가 완전히 성능을 개선하는 추상화가 불필요해집니다. 하지만 이것이 현실이 될 때까지는 통합 환경을 경험할 수 있습니다. 우리는 다양한 로딩 기법을 실험하고 스크립트가 순차적으로 처리되도록 서드 파티 파트너와 의견을 공유할 수 있습니다. 업스트림 변경을 유도할 수 있습니다

YouTube 퍼가기를 예로 들어보겠습니다. 일부 대체 구현에는 네이티브 소스보다 훨씬 더 나은 성능을 제공합니다. 현재 <YouTubeEmbed> @next/third-parties에서 내보낸 구성요소 사용 lite-youtube-embed 'Hello, World' Next.js 비교 시 로드가 상당히 증가함 보다 빠르게 만들 수 있습니다.

YouTube 삽입 구성요소와 일반 YouTube iframe 간의 페이지 로드 비교를 보여주는 GIF — </ph> WebPageTest (모바일 4G - 미국 버지니아)

마찬가지로 Google 지도의 경우 loading="lazy"를 임베딩을 삽입하여 있습니다. 이는 포함해야 할 특성으로 보일 수 있습니다. 특히, Google 지도에서 문서 예시 코드 스니펫에 포함하지만 Google 지도를 임베딩한 Next.js 사이트의 45%가 loading="lazy"를 사용하고 있습니다.

웹 작업자에서 타사 스크립트 실행

@next/third-parties에서 살펴보고 있는 한 가지 고급 기술은 타사 스크립트를 웹 작업자에게 더 쉽게 오프로드할 수 있습니다. 인기 검색어 Party Town과 같은 라이브러리를 이용하면 서드 파티 스크립트가 페이지 성능에 미치는 영향을 크게 기본 스레드를 완전히 벗어나 재배치할 수 있습니다.

다음 애니메이션 GIF는 장기 작업과 기본 스레드의 변형을 보여줍니다. GTM 컨테이너에 다른 <Script> 전략을 적용할 때의 차단 시간 사용할 수 있습니다. 전략 옵션 간에 전환하면서 스크립트가 실행되는 시점을 지연시키고 스크립트를 웹 작업자로 재배치합니다. 메인 스레드에서 시간을 완전히 제거합니다.

다양한 스크립트 전략에 따라 기본 스레드 차단 시간의 차이를 보여주는 GIF — </ph> WebPageTest (모바일 4G - 미국 버지니아)

이 예에서는 GTM 컨테이너의 실행을 이동하고 웹 작업자에게 연결된 태그 스크립트를 통해 TBT를 92%줄였습니다.

주의해서 관리하지 않을 경우, 이 기법은 암묵적으로 많은 서드 파티 스크립트가 중단되어 디버깅이 어려워집니다. 다가오는 타사에서 제공한 구성 요소가 맞는지, @next/third-parties가 웹 작업자에서 실행될 때 올바르게 작동합니다. 그렇다면 개발자가 이 기능을 사용할 수 있는 간편한 선택적인 방법을 제공하기 위해 노력할 것입니다. 기술입니다.

다음 단계

이 패키지를 개발하는 과정에서 타사의 권장 로드를 한곳에 모아 다른 프레임워크가 사용된 것과 동일한 기본 기법의 이점을 누릴 수 있습니다. 그 결과 서드 파티 Capital, 도서관 는 JSON을 사용하여 현재 제3자 로드 기술을 설명합니다. @next/third-parties의 기반이 됩니다.

다음 단계로, 제공된 구성 요소를 개선하는 데 다른 유사 유틸리티를 포함하도록 노력을 확대 널리 사용되는 프레임워크 및 CMS 플랫폼입니다 현재 Nuxt와 협업 중입니다 개발했으며, 조직에 맞춤화된 유사한 서드 파티 유틸리티를 제공할 수 있게 될 것입니다

Next.js 앱에서 사용하는 서드 파티 중 하나가 @next/third-parties, 패키지 설치 도전해 보세요. 여러분의 의견을 들려주세요 GitHub