Astro v4.9リリース!コンテナーAPIやReact 19のサポートなど
![サムネイル](/_astro/thumbnail.KmTIq1c5_1Ivqi.png)
オープンソースの静的サイトジェネレーター「Astro」のバージョン4.9がリリースされました。このリリースでは、新しいコンテナーAPIの追加、React 19のサポート、安定化された実験的機能などが含まれています。
この記事では、Astro 4.9のアップデート内容について詳しく解説します。
Astro 4.9の主な更新内容
コンテナーAPIの追加
Astro 4.9では、コンテナーAPIが導入されました。コンテナーAPIを使うと、AstroのコンポーネントをAstroアプリケーションの外部でレンダリングできます。この機能は、ReactやPreactのサーバーサイドレンダリングと似た機能です。
たとえば、次のようなコードでAstroコンポーネントを文字列にレンダリングできます。
1import { experimental_AstroContainer as AstroContainer } from 'astro/container';2import Component from './components/Component.astro';3
4const container = await AstroContainer.create();5console.log(await container.renderToString(Component));
このAPIは現在、実験的な機能として提供されています。現時点では、Vitestなどのフレームワークによるテストにおいて、Astroコンポーネントをレンダリングしやすくすることに焦点を当てているとのことです。
コンテナーAPIの詳細については、コンテナーAPIのドキュメントを参照してください。フィードバックについては、コンテナーAPIのRFCで受け付けています。
React 19サポート
Astro 4.9では、最新のReact v19への完全なサポートが追加されました。Reactの新しいフォームアクション機能にも対応しています。
たとえば、useActionState
フックを使用して、フォームの送信状態を管理できるようになっています。
1import { actions } from 'astro:actions';2import { useActionState } from 'react';3import { experimental_withState } from '@astrojs/react/actions';4
5export function Like({ postId }: { postId: string }) {6 const [state, action, pending] = useActionState(7 experimental_withState(actions.like),8 0, // initial likes9 );10
11 return (12 <form action={action}>13 <input type="hidden" name="postId" value={postId} />14 <button disabled={pending}>{state} ❤️</button>15 </form>16 );17}
また、状態を追跡する必要がない場合は、Astro Actionsを直接呼び出せるようになっています。
1import { actions } from 'astro:actions';2
3export function SignOut() {4 return (5 <form action={actions.signOut}>6 <button>Sign Out</button>7 </form>8 );9}
AstroアクションはAstro 4.8で導入された実験的な機能です。設定方法などの詳細は、こちらの記事で紹介しています。
![記事のサムネイル](/_astro/thumbnail.CzW3T_s9_UK5jD.png)
また、Astro Actionsの詳細やフィードバックについては、Astro ActionsのRFCを参照してください。
実験的機能の正式提供
Astro 4.6で実験的に導入されていたCSRFプロテクションや、Astro 4.3で導入されていたi18nドメインサポートが正式に利用可能になりました。
![記事のサムネイル](/_astro/thumbnail.CQQBU2zU_1fFlPC.png)
CSRFプロテクションを有効にするためには、experimental.security.csrfProtection
の代わりにsecurity.checkOrigin
を使用する必要があります。また、i18nドメインのサポートはデフォルトで有効化されており、experimental.i18nDomains
オプションは不要になりました。
Astro 4.9へのアップデート方法
既存のプロジェクトをAstro v4.9にアップデートするには、@astrojs/upgrade
を使用できます。または、パッケージマネージャーのアップグレードコマンドを実行して手動でアップグレードできます。
npx @astrojs/upgrade
npm install astro@latestpnpm upgrade astro --latestyarn upgrade astro --latest
まとめ
Astro 4.9は、新しいコンテナーAPIやReact 19のサポートなど、多くの新機能と安定化された実験的機能を含むアップデートとなっています。