見出し画像

Astro2.6がリリースされました。Middlewareがついに搭載!

Astro2.6がリリースされました。
Middlewareが1番の推しっぽいですね!

Middleware

ミドルウェアが安定し、experimentalフラグのないすべてのプロジェクトで利用できるようになりました。ミドルウェアは、ページがレンダリングされてユーザーに返される前または後にコードを実行することができます。これにより、Astroプロジェクトに新たな制御レイヤーをもたらし、認証、リダイレクト、ヘッダー修正などの新しいフックをアンロックします。

認証やリダイレクトの処理に困っていた方は多いのではないでしょうか。(私はあまりアプリの仕事に出会わないので困ったことないですが)

今まではSSRしないとリダイレクトができなかったっぽいので(リダイレクトする仕様の仕事をしたことないので詳しくないw)、ようやくstaticモードでもできるようになったということでしょうか。

StaticRedirectNotAvailable: Redirects are only available when using output: 'server' or output: 'hybrid'. Update your Astro config if you need SSR features. (E03001)

localオブジェクトでミドルウェアからの情報が受け取れるのも便利そうですね!

Astro 2.6では、ミドルウェアからデータを受け渡すために、新しいlocalsオブジェクトが導入されました。localsオブジェクトにアタッチされたデータはすべて永続化され、AstroページコンポーネントやAPIエンドポイント関数の内部でAstro.localsグローバルから読み出すことが可能です。

Hybrid SSR Output Mode

これも使い所ありそうですね。部分的SSR。

Astroの新しいハイブリッドSSR出力モードは、現在安定しており、すべてのAstro開発者が実験フラグなしで利用できます。出力を設定します:"hybrid "を設定すると、インタラクティブなAPIエンドポイントやページをサイトに混ぜつつ、プロジェクト全体を静的でプリレンダリングされた状態に保つことができます。

2023/7/20追記
結構誤解してました。
部分的SSRというより、基本的にはSSGです。
SSRしたいページだけexport const prerender = false;をつけておくと、そのページだけSSRするっぽいです。

なので基本SSRの場合はoutput: 'server'でSSGしたいページだけにexport const prerender = true;をつけるとそのページだけプリレンダリングされます。
基本SSGの場合はoutput: hybridでSSRしたいページにexport const prerender = false;をつけます。

Custom client directives

これはそこまで使い所ないだろうけど、困る人は困っていたんでしょう。
ユーザー独自のdirective。

例えば、ユーザーがその上にカーソルを置いたときだけインタラクティブなコンポーネントをロードしてハイドレートする、独自のclient:hoverディレクティブを定義することができるようになりました

// astro.config.mjs
import { defineConfig } from "astro/config"
import onHoverDirective from "./directives/client-hover.js"

export default defineConfig({
	integrations: [onHoverDirective()],
})

CSS inlining

これはいいんじゃないですか?
ページの高速化が期待できるので安定しているならデフォルトで設定しておきたいですね。

Astro 2.6では、CSSの小さなスニペットをHTMLに自動的にインライン化する新しい設定オプションが導入されています。この最適化により、ページの読み込みに必要なリクエストと外部スタイルシートの数を減らすことで、ほとんどのページを高速化できます(特に最初の読み込み時)。

Redirects (experimental)

これは早く安定リリースしてほしいですね!

Astro 2.6では、プロジェクト内でより簡単にリダイレクトを追加できる実験的な新機能が導入されています。この機能を使うには、プロジェクトの設定ファイルで実験的なフラグexperimental.redirectsを有効にする必要があります。

// astro.config.mjs
import { defineConfig } from "astro/config"

export default defineConfig({
	redirects: {
		"/old": "/new",
	},
	experimental: {
		redirects: true,
	},
})

Markdoc Improvements

マークダウンの読み込みってどのくらい使ってる人がいるんですかね?
見出しのid自動生成は便利そう。

AstroのMarkdocサポートは、@Astrojs/markdocの最新リリースで改善され続けています。この新しいリリースでは、見出しのidの自動生成、より良いシンタックスハイライトのサポート、extendsによる設定拡張のサポートなど、AstroのMarkdownとMDXの完全な機能パリティが実現されています。

Language Tool Improvements

この辺はとりあえずvscodeに拡張機能いれてるだろうし意識する必要はなさそうですね?

Astroの言語ツールは、@astrojs/language-serverの2.0リリースとAstro用VSCode Extensionの2.0リリースでメジャーバージョンアップされました。このリリースでは、パフォーマンス、機能、安定性を向上させるために、Volarへの大幅な書き換えと内部移行を完了しました。

Volarは、Vueチームによる言語ツールのための汎用フレームワークです。Volarのようなフレームワークを使用すると、Astroが内部でViteを使用しているのと同様に、言語サーバーにいくつかの利点があります。Volarを使うことで、ツール周りの車輪を丹念に作り直す時間を減らし、ユーザーのための機能構築にもっと時間をかけることができます。VSCode、astro check、そしてAstro言語サーバーの他のすべての消費者は、この変更から利益を得るはずです。

Volarは、すべての言語がその上に構築できる標準的なフレームワークに急速になりつつあり、私たちはこのプロジェクトをサポートできることをうれしく思っています。私たちは、Astroの開発者を含むすべての人のために、Volarを改善し続けることを楽しみにしています。


以上、簡単なAstro2.6チェックでした!

この記事が気に入ったらサポートをしてみませんか?