2024年最後の更新かな？

AstroとWordPressを組み合わせてヘッドレスCMSで検索ページを作った際につまづいた点。Next,jsとは異なりAstroは基本SSGで静的書き出しをすることを前提としたシステムで、SSRでサーバーサイド処理する場合は少し設定が必要です。要は公式ドキュメントに書いてあるのでよく読もうね〜というお話です。今回の開発環境は以下の通り。

• WordPress 6.5.x （PHP 8.2.x）
• Astro 4.16.x

まず、コンフィグファイルのastro.config.mjsにoutput: 'hybrid'を記述します。

export default defineConfig({
 output: 'hybrid',
 site: 'https://example.com'
})

次にSSRで動作させたい検索結果ページ（/search/index.astro）に以下のように記述します。コード内にexport const prerender = false;を記載することでサーバーレンダリングされるようになります。逆に何も記述していない記事一覧や記事詳細などは静的レンダリングされます。以下は検索フォームからGETパラメータで[s]という値を受け取ってREST APIで検索した例です。

---
export const prerender = false; /*　←これを付加する　*/
import Layout from '../../layouts/Layout.astro';
import { format } from 'date-fns';
const seaechText = Astro.url.searchParams.get('s');
const JSON_URL = `${import.meta.env.WP_JSON_URL}?_embed&search=${seaechText}`;
const posts = await getPostSearch();
const seaechTotal = await getPostSearchTotal();
async function getPostSearch() {
 const res = await fetch(JSON_URL);
 return res.json()
}
async function getPostSearchTotal() {
 const count = await fetch(JSON_URL).
 then((res) => {return parseInt(res.headers.get('X-WP-Total'))});
 return count;
}
---
<Layout title=`記事検索：${seaechText}件`>
<main>
<h1>{seaechText}の検索結果{seaechTotal}件 見つかりました</h1>
<ul>
 { posts.map((post) =>
  <li>
   <a href={`/${post.slug}`}>
    <p>{post.title.rendered}</p>
    〜〜中略〜〜
   </a>
  </li>
 )}
</ul>
</main>
</Layout>

また、Astroでサーバーサイドレンダリングで実行するときは、アダプターと呼ばれる追加ランタイムをインストールする必要があります。astro addコマンドでインストールが可能で、例えばサーバがnode.jsであれば以下のコマンドで実行できます。

$ npx astro add node

参考リンク：@astrojs/node | Docs

おしまい♥

タグ：AstroJamstacknpm(Node.js)WordPress