Svelte

SvelteKitを使わないSvelteアプリ——Viteで作ったSPA——からもgenko.meのコンテンツを表示できます。配信APIはRESTなので、@genko-me/sdkをブラウザから呼び、取得した値を@genko-me/svelteの表示部品に渡します。

SvelteKitとの違いは取得の場所だけです。表示部品（ListClient・EntryProvider・ListItem・ViewItemなど）はSvelteKitに依存しない普通のSvelte 5コンポーネントなので、この対象でもそのまま使えます。SvelteKitを使っている場合はSvelteKitを参照してください。

使うパッケージ

この対象で使えないもの。 @genko-me/svelte/serverのfetchGenkoList・fetchGenkoEntry・genkoPaginationHandler・genkoPaginationActionです。いずれもnode:cryptoを使い、SvelteKitの+page.server.ts・+server.tsのようなサーバー側の実行場所を前提にしています。Viteだけで動くSPAにはその場所がないため、取得は@genko-me/sdkを直接呼ぶ形になります。ページ送りも、サーバーが署名したトークンではなく自前のloadPage関数で組み立てます。

正直な話：APIキーとSEO

ブラウザから直接呼ぶ構成では、APIキーは秘密にできません。 バンドルに埋め込まれた値も、通信時のX-API-KEYヘッダーも、開発者ツールから読めます。読み取り専用のキーとはいえ、そのキーで許可したAPIは誰でも読めるものとして扱ってください。

• APIキーは「選択したAPIのみ」で、公開して差し支えないAPIだけに絞る。
• 有効期間を短くし、定期的に交換する。
• 隠したいデータがあるなら、自分のサーバーで取得してJSONを返す構成にする。

検索エンジン向けには不利です。 初期HTMLは空の<div id="app">で、本文はJavaScriptの実行後に入ります。OGPのタイトル・説明もサーバーから返せません。検索流入やSNSシェアが重要なページなら、SSRで返すSvelteKitのほうが確実です。

向いている用途

• ログイン後の画面や社内ツールなど、検索流入を前提としない画面にお知らせ・ヘルプを出す。
• すでにあるSvelte製SPAの一部分だけをgenko.meで差し替える。
• 管理する人がコンテンツを更新したら、再ビルドなしで即座に反映したい画面。

向いていないもの

• 検索エンジンやSNSのプレビューを重視する公開ページ。
• APIキーを見せたくない構成。
• Webhookの受信。受け取るサーバーがないため、実践の方法をとります。

次に読む

• 導入：インストールから一覧・詳細の表示まで
• 実践：ページ送り・下書きプレビュー・更新の反映
• 並び替え・絞り込み・検索
• 配信API：SDKを使わずHTTPで取得する