SvelteKitの核となる仕事は、次の3つに集約されます。
- ルーティング — 受信リクエストに一致するルートを特定します。
- 読み込み — ルートに必要なデータを取得します。
- レンダリング — HTMLを生成する（サーバー上）か、DOMを更新する（ブラウザ内）
ルーティングとレンダリングの仕組みを見てきました。次は、中間部分である読み込みについて説明します。
アプリの各ページは、+page.svelteファイルと並行して+page.server.jsファイルに`load`関数を宣言できます。ファイル名からわかるように、このモジュールはクライアント側のナビゲーションを含め、サーバー上でのみ実行されます。`src/routes/blog/+page.server.js`ファイルを追加して、`src/routes/blog/+page.svelte`にあるハードコードされたリンクを実際のブログ投稿データに置き換えられるようにしましょう。
src/routes/blog/+page.server
import { posts } from './data.js';
export function load() {
return {
summaries: posts.map((post) => ({
slug: post.slug,
title: post.title
}))
};
}チュートリアルのため、`src/routes/blog/data.js`からデータをインポートしています。実際のアプリでは、データベースやCMSからデータを読み込む可能性が高くなりますが、ここではこのようにします。
このデータには、`src/routes/blog/+page.svelte`で`data`プロパティを介してアクセスできます。
src/routes/blog/+page
<script>
let { data } = $props();
</script>
<h1>blog</h1>
<ul>
<li><a href="/blog/one">one</a></li>
<li><a href="/blog/two">two</a></li>
<li><a href="/blog/three">three</a></li>
{#each data.summaries as { slug, title }}
<li><a href="/blog/{slug}">{title}</a></li>
{/each}
</ul>それでは、投稿ページにも同じことを行いましょう。
src/routes/blog/[slug]/+page.server
import { posts } from '../data.js';
export function load({ params }) {
const post = posts.find((post) => post.slug === params.slug);
return {
post
};
}src/routes/blog/[slug]/+page
<script>
let { data } = $props();
</script>
<h1>blog post</h1>
<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>最後に1つだけ対処する必要がある詳細があります。ユーザーが無効なパス名（例：`/blog/nope`）にアクセスする可能性があります。その場合は、404ページで応答するのが望ましいです。
src/routes/blog/[slug]/+page.server
import { error } from '@sveltejs/kit';
import { posts } from '../data.js';
export function load({ params }) {
const post = posts.find((post) => post.slug === params.slug);
if (!post) error(404);
return {
post
};
}エラー処理については、後の章で詳しく説明します。
1
2
<p>home</p>