なぜ必要なのか

住民が記事を読み、ときどき保存する地域の便りを作るとします。制作側は部品を組み合わせて記事ページを作り、記事ごとにアプリ全体を送らず保存ボタンだけを動かしたいと考えます。

どう解決するのか

地域の便りをMarkdown記事3件とレイアウト一つから始めます。次へで一覧と記事HTML3件を生成し、ホスティング経由でブラウザーへ届けます。任意の保存アイランドを有効にしても本文は読めます。レイアウト欠落はビルドを停止します。静的ファイルだけでは個人の保存記録を維持できません。前へは前段階、リセット・再読み込みは初期状態に戻ります。

地域の便りをビルド

概念シミュレーション

Astro

地域の便りで次へを押し、ソース → ビルド → 出力 → ホスト → ブラウザーをたどります。

  1. 01 Markdown記事3件 + レイアウト
    • block-party.md
    • pet-adoption.md
    • community-meeting.md
    • 共通レイアウト
  2. 02 Astroコンポーネントのビルド

    待機

  3. 03 生成HTMLファイル 0

    index.html · block-party.html · pet-adoption.html · community-meeting.html

  4. 04 静的ホスト · ファイル公開
  5. 05 ブラウザー · 記事3件を読む

Markdown記事3件 + レイアウト

実行境界
ビルド：コンポーネント・Markdown→HTML。選んだアイランドはブラウザーで実行。
状態と責任
公開担当はビルドと成果物、別APIは個人保存を担当します。

本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。

どんな考え方なのか

AstroはコンテンツをHTMLに描画し、選んだアイランドにクライアント側の操作を追加します。ここでは静的出力を使いますが、サーバーレンダリングにも対応します。

アイランドと別の保存APIを組み合わせます。

出典