SvelteKitは+page.server.tsでSSR配信

SvelteKitでgenko.meの記事一覧・詳細をサーバーで描画し、ページ送りと下書きプレビューまで用意する方法。

SvelteKitからは@genko-me/svelteを使います。取得は+page.server.tsのloadで行い、受け取ったデータを表示部品が描きます。APIキーはサーバーに残り、初期HTMLに本文が入った状態で返せます。

Svelte 5（runes）が対象です。SvelteKitを使わないSvelteアプリはSvelteを参照してください。

使うパッケージ

npm

pnpm

yarn

bun

bash

npm install @genko-me/svelte @genko-me/sdk

import元	中身
`@genko-me/svelte`	表示部品13点（`ListClient`・`EntryProvider`・`ListItem`・`ViewItem`・`ListLink`・`Pagination`・`Error`・`Null`・`Loading`・`PreviewNotice`・`RichText`・`ShareButtons`・`AppearanceProvider`）と`createGenkoPageLoader`
`@genko-me/svelte/server`	`fetchGenkoList`・`fetchGenkoEntry`・`genkoPaginationHandler`・`genkoPaginationAction`
`@genko-me/sdk`	配信APIのクライアント。`createGenko`でAPIとスキーマを定義します

@genko-me/svelte/serverはnode:cryptoを使うため、サーバー側のファイル（+page.server.ts・+server.ts）からだけimportします。.svelteから読むとビルドが失敗します。

部品名は@genko-me/reactと同じです。Reactが子要素で受け取るものを、Svelte 5ではsnippetで受け取ります。名前は変えていません。

React	SvelteKit
`<List>`の通常の子要素	`ListClient`の`children` snippet
`<List>`直下の`<Error>`	`error` snippet
`<List>`直下の`<Null>`	`empty` snippet
`<List>`直下の`<Loading>`	`loading` snippet
`<List>`直下の`<Pagination>`	`pagination` snippet
`<ListItem fallback={<span/>} />`	`<ListItem>{/* fallback snippet */}</ListItem>`
`<List api={…}>`がサーバーで取得	`fetchGenkoList()`（`+page.server.ts`）
`<View api={…}>`がサーバーで取得	`fetchGenkoEntry()`（`+page.server.ts`）
`className`	`class`（`className`も受け付けます）

意図的に違うところが2つあります。どちらもsnippetの中身を走査できないためです。

表示するフィールドの指定。 ReactはJSXから<ListItem id="…">を集めて取得フィールドを絞り込みます。SvelteではfetchGenkoList・fetchGenkoEntryのfieldsに並べます。省略すると絞り込みません。
ページ送りのmode・param。 Reactは<Pagination mode="url" />のpropを読みます。SvelteではListClientのpaginationOptionsとfetchGenkoListのpaginationに指定します。Pagination自体はラベルとクラスだけを受け取ります。

Svelte 4以前。@genko-me/svelteはSvelte 5のrunesとsnippetで書かれています。
adapter-staticによる完全な静的書き出し。ページ送りの受け口（+server.tsまたはフォームアクション）はサーバーが必要です。一覧を1ページに収めるなら静的書き出しでも動きます。
Node.js以外のサーバーランタイム。@genko-me/svelte/serverはnode:cryptoを使うため、Node.js向けのアダプターを前提にしています。