Astro v4.9リリース！コンテナーAPIやReact 19のサポートなど

オープンソースの静的サイトジェネレーター「Astro」のバージョン4.9がリリースされました。このリリースでは、新しいコンテナーAPIの追加、React 19のサポート、安定化された実験的機能などが含まれています。

この記事では、Astro 4.9のアップデート内容について詳しく解説します。

Astro 4.9の主な更新内容

コンテナーAPIの追加

Astro 4.9では、コンテナーAPIが導入されました。コンテナーAPIを使うと、AstroのコンポーネントをAstroアプリケーションの外部でレンダリングできます。この機能は、ReactやPreactのサーバーサイドレンダリングと似た機能です。

たとえば、次のようなコードでAstroコンポーネントを文字列にレンダリングできます。

```typescript title="test.ts"
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import Component from './components/Component.astro';

const container = await AstroContainer.create();
console.log(await container.renderToString(Component));
```

このAPIは現在、実験的な機能として提供されています。現時点では、Vitestなどのフレームワークによるテストにおいて、Astroコンポーネントをレンダリングしやすくすることに焦点を当てているとのことです。

コンテナーAPIの詳細については、 コンテナーAPIのドキュメント を参照してください。フィードバックについては、 コンテナーAPIのRFC で受け付けています。

React 19サポート

Astro 4.9では、最新のReact v19への完全なサポートが追加されました。Reactの新しいフォームアクション機能にも対応しています。

たとえば、useActionStateフックを使用して、フォームの送信状態を管理できるようになっています。

```tsx title="src/components/Like.tsx"
import { actions } from 'astro:actions';
import { useActionState } from 'react';
import { experimental_withState } from '@astrojs/react/actions';

export function Like({ postId }: { postId: string }) {
const [state, action, pending] = useActionState(
experimental_withState(actions.like),
0, // initial likes
);

return (
<form action={action}>
<input type="hidden" name="postId" value={postId} />
<button disabled={pending}>{state} ❤️</button>
</form>
);
}
```

また、状態を追跡する必要がない場合は、Astro Actionsを直接呼び出せるようになっています。

```tsx title="src/components/SignOut.tsx"
import { actions } from 'astro:actions';

export function SignOut() {
return (
<form action={actions.signOut}>
<button>Sign Out</button>
</form>
);
}
```

AstroアクションはAstro 4.8で導入された実験的な機能です。設定方法などの詳細は、こちらの記事で紹介しています。

Astro v4.8リリース！Astroアクションやリクエストの書き換え機能など

Astro v4.8がついにリリースされました。このバージョンでは、実験的な機能としてAstroアクションやリクエストの書き換えが導入され、さらに性能向上や複数ルートの同一エントリポイント定義も可能になりました。

また、Astro Actionsの詳細やフィードバックについては、 Astro ActionsのRFC を参照してください。

実験的機能の正式提供

Astro 4.6で実験的に導入されていたCSRFプロテクションや、Astro 4.3で導入されていたi18nドメインサポートが正式に利用可能になりました。

Astro v4.6リリース！i18n強化やCSRF保護などが追加

2023年4月11日に、静的サイトジェネレーターであるAstroの最新バージョンAstro 4.6がリリースされました。このバージョンでは、国際化のための手動ルーティング戦略や開発者ツールバーの移動機能、CSRF保護の実験的サポートなど、多数の新機能と改善が追加されています。

CSRFプロテクションを有効にするためには、experimental.security.csrfProtectionの代わりにsecurity.checkOriginを使用する必要があります。また、i18nドメインのサポートはデフォルトで有効化されており、experimental.i18nDomainsオプションは不要になりました。

Astro 4.9へのアップデート方法

既存のプロジェクトをAstro v4.9にアップデートするには、@astrojs/upgradeを使用できます。または、パッケージマネージャーのアップグレードコマンドを実行して手動でアップグレードできます。

npx @astrojs/upgrade

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

まとめ

Astro 4.9は、新しいコンテナーAPIやReact 19のサポートなど、多くの新機能と安定化された実験的機能を含むアップデートとなっています。

参考

• Astro 4.9 | Astro