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

過去のバージョンで実験的機能として導入されていた、ハイブリッドな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で追加された機能については、今後試してみようと思います。