SvelteKit에서 Langsys 사용하기

패턴은 어디서나 같습니다. 서버가 카탈로그를 한 번 가져오고(쓰기 키는 서버에만 보관), 클라이언트는 그 시드로 읽기 전용 키를 사용해 langsys-js-svelte를 초기화합니다. 중복 요청은 없습니다. 번역 자체는 브라우저에서 이루어집니다. 서버가 보내는 HTML은 기본 언어로 되어 있고 검색 엔진도 이를 색인하며, 페이지는 로드되면서 방문자의 언어로 전환됩니다.

1 · +layout.server.ts에서 카탈로그 로드하기

서버 load 함수는 페이지를 렌더링할 때마다 카탈로그를 한 번 가져오며, SvelteKit이 이를 페이지 데이터로 직렬화합니다. 쓰기 키는 서버에만 남고 클라이언트는 읽기 전용 키를 받습니다. 양쪽 모두 같은 카탈로그를 사용하며, 클라이언트는 초기 가져오기만 건너뜁니다.

// src/routes/+layout.server.ts
import { LANGSYS_API_KEY, LANGSYS_PROJECT_ID } from '$env/static/private';

export const load = async ({ fetch }) => {
  const locale = 'en-US'; // from cookie / Accept-Language
  const res = await fetch(
    `https://api.langsys.dev/api/projects/${LANGSYS_PROJECT_ID}/translations?locale=${locale}`,
    { headers: { 'x-Authorization': LANGSYS_API_KEY } }
  );
  const { data: translations } = await res.json();
  return { locale, translations };
};

2 · +layout.svelte에서 초기화하기

표준 Svelte writable이 로케일 스토어이며, Svelte 바인딩이 이를 SDK에 맞게 변환합니다. 초기화는 시드된 카탈로그와 함께 onMount에서 실행되므로 아무것도 두 번 가져오지 않습니다. onMount가 실행되면 텍스트가 기본 언어에서 방문자의 언어로 전환됩니다.

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte';
  import { writable } from 'svelte/store';
  import { LangsysApp } from 'langsys-js-svelte';
  import { PUBLIC_LANGSYS_API_KEY, PUBLIC_LANGSYS_PROJECT_ID } from '$env/static/public';

  export let data;

  const locale = writable(data.locale);

  onMount(() => {
    LangsysApp.init({
      projectid: PUBLIC_LANGSYS_PROJECT_ID,
      key: PUBLIC_LANGSYS_API_KEY, // read-only
      UserLocaleStore: locale,
      initialTranslations: data.translations,
      initialTranslationsLocale: data.locale,
      ssrTokenStrategy: 'client',
    });
  });
</script>

<slot />

3 · 아래 어디서나 사용하기

여기서부터는 일반 Svelte SDK입니다. 어떤 컴포넌트에서든 $t를 사용할 수 있고(시그널은 Svelte의 스토어 규약을 기본적으로 충족합니다), $locale = 'fr-FR'로 앱 전체의 언어를 전환할 수 있습니다.

<script>
  import { t } from 'langsys-js-svelte';
</script>

<h1>{$t('Welcome to our store', 'Home')}</h1>