Jamstackは、静的なWebサイトを構築するためのアーキテクチャの1つであり、JavaScript、API、およびマークアップ言語（HTML、CSS）を使用します。 Jamstackは、セキュリティ、パフォーマンス、および開発の速度の向上を提供することができます。

この記事では、AstroとWordPressを使用してJamstackなブログサイトを構築する方法を紹介します。Astroは、静的なWebサイトを作成するための新しいツールであり、速度とパフォーマンスの最適化に特化しています。

Astroのプロジェクトの作成

$ npm create astro@latest

アプリケーションの起動

次にプロジェクトディレクトリに移動したあと、開発サーバーを立ち上げます。
http://localhost:3000/にアクセスして画面が正常に表示されるか確認します。

$ cd my-fisrt-astro-blog
$ npm run dev

データの取得

サイト固有のREST API URLとコンテンツのルートを通して、WordPressのデータを取得します。(ブログの場合、これは一般的に投稿になります）次に、Astroのset:html={}ディレクティブを使用して、データプロパティをレンダリングすることができます。

例えば、投稿のタイトルとその内容の一覧を表示する場合などです：
/src/blogs/index.astroに以下のコードを記述します。

---
const res = await fetch("https://[YOUR-SITE]/wp-json/wp/v2/posts?_embed")
const posts = await res.json()
---
<h1>Astro+ WordPress</h1>です。
{
 posts.map((post) => ()
      <h2 set:html={post.title.rendered}  />。
      <p set:html={post.content.rendered}  />。
  ))
}

動的ルーティング

個別記事のページを動的に取得するために動的ルーティングを設定します。
/src/blogs/[id].astroというファイルを作成します。
動的ルーティングを設定する際にブラケット[]の中に変数を設定します。URLの/blogsの後に続くidはAstro.paramsから取得することができます。取得する際は[]の中で設定した変数名を利用します。

const { slug } = Astro.params;

export async function getStaticPaths() {
  let data = await fetch("https://[YOUR-SITE]/wp-json/wp/v2/posts?_embed")
  let posts = await data.json();

  return posts.map((post) => ({
    params: { id: post.id },
    props: { post: post },
  }));
}

const { post } = Astro.props;
---
<Layout title={post.title.rendered}>
  <article>
    <h1 set:html={post.title.rendered} />
    <div set:html={post.content.rendered} />
  </article>
</Layout>

アイキャッチ画像の取得

fetchに指定したAPIのURLにembedクエリパラメーターを追加することでアイキャッチ画像が取得できるようになります。

let data = await fetch("https://[YOUR-SITE]/wp-json/wp/v2/posts?_embed")

_embedded['wp:featuredmedia']['0'].source_urlプロパティを指定することで、ページにアイキャッチ画像を表示できます。

<Layout title={post.title.rendered}>
  <article>
    <img src={post._embedded['wp:featuredmedia']['0'].source_url} />
    <h1 set:html={post.title.rendered} />
    <Fragment set:html={post.content.rendered} />
  </article>
</Layout>