Langsys với SvelteKit

Mô hình này giống nhau ở mọi nơi: máy chủ tải danh mục một lần (khóa ghi luôn nằm ở phía máy chủ), còn máy khách khởi tạo langsys-js-svelte từ dữ liệu nạp sẵn đó bằng khóa chỉ đọc — không tải trùng lặp. Việc dịch diễn ra ngay trong trình duyệt: HTML do máy chủ gửi về dùng ngôn ngữ gốc, cũng là nội dung mà các công cụ tìm kiếm lập chỉ mục, và trang sẽ chuyển sang ngôn ngữ của khách truy cập khi tải xong.

1 · Tải danh mục trong +layout.server.ts

Hàm load phía máy chủ tải danh mục một lần cho mỗi lần kết xuất trang; SvelteKit tuần tự hóa nó vào dữ liệu trang. Khóa ghi vẫn nằm trên máy chủ; máy khách nhận khóa chỉ đọc. Cả hai phía đều thấy cùng một danh mục — máy khách chỉ bỏ qua bước tải ban đầu.

// 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 · Khởi tạo trong +layout.svelte

Một writable chuẩn của Svelte chính là kho lưu ngôn ngữ (locale store) — binding Svelte điều chỉnh nó cho SDK. Init chạy trong onMount cùng danh mục đã được nạp sẵn, nên không có gì bị tải hai lần. Văn bản sẽ chuyển từ ngôn ngữ gốc sang ngôn ngữ của người truy cập sau khi onMount chạy.

<!-- 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 · Dùng ở bất kỳ đâu bên dưới

Từ đây trở đi, đó là SDK Svelte thuần: dùng $t trong bất kỳ component nào (các signal đáp ứng sẵn hợp đồng store của Svelte), và $locale = 'fr-FR' sẽ chuyển ngôn ngữ cho toàn bộ ứng dụng.

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

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