Gatsby

Gatsby는 빌드 시 정적 HTML을 생성하고 클라이언트에서 리하이드레이션합니다. CDN 스크립트는 브라우저 API에서만 로드해야 하므로 gatsby-browser.js가 적합한 위치입니다.

@wink/elements npm 패키지 TypeScript 타입과 함께 CDN 번들을 설치하고 로드하세요.

설치

npm install @wink/elements

gatsby-browser.js를 통한 로드

onClientEntry API는 Gatsby 런타임이 브라우저에서 초기화되자마자 한 번 실행됩니다:

import { load } from '@wink/elements';

export function onClientEntry() {
  load({ clientId: process.env.GATSBY_WINK_CLIENT_ID });
}

환경 변수

Gatsby는 GATSBY_ 접두사가 붙은 변수만 브라우저 번들에 노출합니다:

GATSBY_WINK_CLIENT_ID=your-client-id

GATSBY_WINK_CLIENT_ID=your-client-id

페이지 및 컴포넌트에서 사용

import React from 'react';

export default function HotelsPage() {
  return (
    <main>
      <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
      <wink-lookup />
    </main>
  );
}

TypeScript

Gatsby는 React를 사용하므로 React 통합과 동일한 JSX 내장 선언을 추가하세요:

// 전체 선언 파일은 /integrations/react를 참조하세요

gatsby-ssr.js — 변경 불필요

gatsby-ssr.js를 수정할 필요가 없습니다. <wink-*> 태그는 정적 출력에서 일반 HTML 요소로 렌더링되며, 브라우저가 페이지를 로드할 때 CDN 스크립트가 이를 업그레이드합니다.