Astro 2.6を試す

Astroのバージョン2.6が公開されたので、本ブログを構成しているAstroもアップデートして試してみました。

Astro

Astro 2.6: Middleware | Astro A handful of experimental features go stable in Astro 2.6 including middleware, hybrid SSR output mode, custom client directives, and CSS inlining. Experimental…

過去のバージョンで実験的機能として導入されていた、ハイブリッドなSSR（サーバーサイドレンダリング）出力が正式に設定可能になりました。以下の例のようにastro.config.mjsにて設定できます。

// astro.config.mjs

export default defineConfig({
  output: "hybrid",
  adapter: netlify(),
})

プロジェクト全体を静的に保ち、デフォルトで事前レンダリングされた状態に保ちながら、インタラクティブな API エンドポイントとページをサイトに混在させることができるようです（要検証）。

また、すぐに試せる機能としては、CSSのインラインスタイル化のオプションが導入されました。以下のようにastro.config.mjsで設定することにより、外部CSSとして読み込んでいたファイルのすべて、もしくは一部をインラインスタイルとして最適化されます。

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

export default defineConfig({
  build: {
    inlineStylesheets: "auto",
  },
})

‘always’: すべてのスタイルは<style>タグにインライン化されます
‘auto’: (デフォルト: 4kb) より小さいスタイルシートのみがインライン化されます。それ以外の場合、スタイルは外部スタイルシートで送信されます。
‘never’: すべてのスタイルは外部スタイルシートで送信されます

当ブログでもCSSのインラインオプションをautoにして試してみたところ、トップページでは外部CSSの読み込みが6つあったものが、2つが外部読み込み、2つがインラインCSSとして自動的に振り分けられました。インライン化されたものは主にコンポーネント内に記述した短いスタイル群になります。

当ブログでは体感的な読み込みスピードはそこまで変わらないかもしれませんが、ほとんどの静的ページにおいて高速化が期待できます。ちなみにこのCSSインラインオプションは、Astro 3.0においてデフォルトの動作になる可能性があるそうです。

そのほかの2.6で追加された機能については、今後試してみようと思います。