SSG の限界を破る、再ビルド不要なサイト

フロントエンドカンファレンス東京 2025で発表したスライドです。

Transcript

1. SSG の限界を破る、 再ビルド不要なサイト れやか (@reyalka_dev) 1
2. 自己紹介 れやか (reyalka) 学生です Astroが好き 2
3. SSG とは、 Astroのこと 3
4. Astro v5.10 で追加された Live Content Collections のお話 4
5. 1. Astro Content Collections について 5
6. Live Content Collections は Content Collections の拡張 まずは、Content Collections について 1. Astro Content Collectionsについて 6
7. Content Collections は、コンテンツを楽に・安全に扱えるようにする 機能 以下のような機能が存在する Local File や 外部 API からのコンテンツ取得 Markdown, HTML, JSON, YAML など様々なフォーマットに対応 Zod によるスキーマバリデーション Typescript の型生成 1. Astro Content Collectionsについて 7
8. (例) Markdown で書いたブログ記事のコンテンツを管理する場合 const blog = defineCollection({ // 1. content loaderの定義 loader: glob({ base: "./src/data/blog", pattern: "**/*.md" }), // 2. スキーマバリデーション schema: z.object({ title: z.string(), description: z.string().optional(), pubDate: z.date(), }), }); export const collections = { blog }; 1. Astro Content Collectionsについて src/content/config.ts 8
9. (例) Markdown で書いたブログ記事のコンテンツを管理する場合 // 3. コンテンツの取得 const allPosts = await getCollection("blog"); // すべてのコンテンツ const post = await getEntry("blog", "<post-id>"); // 特定のコンテンツ このとき、型補完が効くので便利 1. Astro Content Collectionsについて 9
10. 2. 従来の Content Collections の弱点 10
11. コンテンツはビルドごとに反映される .astro ファイル Build HTML ファイル 静的なコンテンツ しかし、この方法だとコンテンツを更新する度にビルドが必要になる →リアルタイム性が求められるコンテンツには不向き (例：ニュース、天気予報、株価情報など) 2. 従来の Content Collections の問題点 11
12. だったら、SSR すれば？ →「静的=SSG」「動的＝SSR」 2. 従来の Content Collections の問題点 12
13. 双方にメリットがある SSG: 生のHTMLを配信できる SSR: 常に最新の情報を提供できる SSG と SSR の良いとこ取りができたらな... 2. 従来の Content Collections の問題点 13
14. そこで、Live Content Collections SSR SSG 2. 従来の Content Collections の問題点 14
15. 3. Live Content Collections とは？ 15
16. ビルド時ではなく、リクエスト時にコンテンツを取得してページを生 成する コンテンツストア（API 等） サーバー ユーザー コンテンツストア（API 等） サーバー ユーザー リクエストを送信 コンテンツの取得を要求 コンテンツデータ返却 ページ生成処理 ページHTML を返却 しかも、これは ページの一部分だけ 3. Live Content Collections とは？ 16
17. <section> <h1>最新のニュース</h1> 　// ここは静的 (= 生のHTML = SSG) <img src="..." alt="..." /> // ここも静的 <LatestNews server:defer /> // ここは動的 (= SSR) </section> 3. Live Content Collections とは？ 17
18. 毎回データを取得するので、常に最新の情報 を提供できる しかも、Astro のコンテンツ管理機能もつい てくる 3. Live Content Collections とは？ 18
19. (例) 外部 API にリクエストして、データを取得する const news = defineLiveCollection({ // 1. content loaderの定義(データ取得部分は省略) loader: liveFeedLoader("https://example.com/api/news"), // 2. スキーマバリデーション schema: z.object({ id: z.string(), title: z.string(), author: z.string().optional(), body: z.string(), }), }); export const collections = { news }; 3. Live Content Collections とは？ src/live.config.ts 19
20. (例) 外部 API にリクエストして、データを取得する // 3. コンテンツの取得 const { entries, error } = await getLiveCollection("news"); // すべてのコンテンツ if (error) { ... } // エラーハンドリング const { entry, error } = await getLiveEntry("news", "<news-id>"); // 特定のコンテンツ if (error) { ... } // エラーハンドリング もちろん、型補完も効く 3. Live Content Collections とは？ 20
21. コンテンツストア（API 等） サーバー ユーザー コンテンツストア（API 等） サーバー ユーザー リクエストを送信 コンテンツの取得を要求 コンテンツデータ返却 ページ生成処理 ページHTML を返却 3. Live Content Collections とは？ 21
22. ユーザーからリクエストが来るたび にコンテンツを取得するのは、負荷 が高いのでは？ → cacheHint で解決 3. Live Content Collections とは？ 22
23. 4. cacheHint で負荷を軽減 23
24. Astro は、負荷を軽減するために、 cacheHint を導入 適切なキャッシュ方法を教えてくれる cacheHint は、Loader 側が設 定する (例) Loader が cacheHint を提供している場合 const { entry: post, error, cacheHint, } = await getLiveEntry("blog", "<post-id>"); Astro.response.headers.set("Last-Modified", cacheHint.lastModified.toString()); 4. cacheHintで負荷を軽減 24
25. export interface CacheHint { /** Cache tags */ tags?: Array<string>; /** Maximum age of the response in seconds */ maxAge?: number; /** Last modified time of the content */ lastModified?: Date; } 4. cacheHintで負荷を軽減 25
26. cacheHint で提供する情報は Loader 側に委ねられる 将来的には Astro 内部で自動的に 実装されるかも？ 4. cacheHintで負荷を軽減 26
27. 5. ISR との比較 27
28. Live Content Collections と似たような仕組み → ISR 5. ISRとの比較 28
29. Next.js の ISR Astro の Live Content Collections 検証するかは開発者次 第 自動でコンテンツを検証 ビルドした結果を保存 しておく リクエストが来るたびにコンテンツを取得 して、ページを生成する revalidate の秒数ごと に再生成 毎回取得するので、常に最新の情報を提供 できる 5. ISRとの比較 29
30. 5. まとめ 30
31. Live Content Collections は、SSG と SSR の 良いとこ取り 動的なコンテンツを扱うための新しい選択肢 となりうる 5. まとめ 31