"A Web Odyssey"

- Webエンジニアの旅 -

Astro 5.0 β版がリリース！新たに導入された新機能とは？

Astro

#Tech
#フレームワーク
#リリース情報
#Content Layer
#Server Islands
ブログ記事のサムネイル

はじめに

9月18日にAstro 5.0 β（ベータ）版がリリースされました！

早速ですがこの記事では、Astro 5.0 β（ベータ）版で導入された以下の新機能についてご紹介いたします。

  • ・強力なコンテンツ機能：Content Layer
  • ・インタラクティブな部分をサーバーサイドで遅延レンダリングする仕組みを提供：Server Islands
  • ・静的出力モードとハイブリッド出力モードの統合

Content Layer

Content Layerは、Astro 5.0 β（ベータ）版で導入された強力な「コンテンツ管理機能」になります。

コンテンツを定義・アクセスするための統一された型安全なAPIを提供することで、複数のデータソースからのコンテンツを一元的に管理することを可能とします。

従来は異なるソースからデータを取得する際、それぞれのAPIやデータフォーマットに合わせた処理が必要でしたが、今回リリースされたContent Layerでは、異なるデータを抽象化することで、簡単に扱えるようになりました。

Loaders機能

Content Layerでは、「Loaders」という機能を利用して、任意のソースからデータを取得し、それを統一フォーマットに変換する仕組みを提供してくれるため、Markdown、CMS、REST API、Cloudinaryなど、異なるデータソースからの情報を一元的に取り扱えるようになります。

また、Content Layerで管理するデータは型安全に扱えるため、コードの品質や安定性を向上させることができます。

実装例

import { defineCollection } from "astro:content";
import { notionLoader } from "notion-astro-loader";
　
const database = defineCollection({
  //npmパッケージ"notion-astro-loader"を使用して、たった1行でNotionのコンテンツを自動取得。
  loader: notionLoader({ /* ... */ })
});
　
export const collections = {
  database,
}

この実装例は、notionLoaderを利用してNotionのデータベースから自動的にコンテンツを取得し、型安全なコレクションを定義するものです。

このようにして、複雑なAPIやデータ変換を、たった1行のコードで実行でき、プロジェクト内で型安全なコンテンツ管理を実現できるのがContent Layerの強みでもあります。

Content Layerのまとめ

  • 1. Markdown、CMS、REST API、Cloudinaryなど、異なるデータソースからのコンテンツを統一された形式で一元的に管理できる。
  • 2. 型安全なデータ管理が可能。

Content Layerを使えば、ウェブサイト開発において多様なコンテンツを効率よく管理することができ、型安全なデータアクセスを実現できるようになります。

Server Islands

Server Islandsは、Astro 5.0 β（ベータ）版で導入された静的コンテンツと動的（インタラクティブ）コンテンツを効率的に共存させるための強力なツールです。

サイトの初回ロード時には静的コンテンツのみを生成し、その後、インタラクティブにしたいUIコンポーネントには個別でハイドレーションができるので、無駄なJavaScriptを読み込みません。

これにより、ユーザー体験を損なわずに最適なパフォーマンスを提供できます。

Server Islandsの特徴

Server Islandsは、従来の「アイランドアーキテクチャ」を拡張した機能です。

インタラクティブなUIコンポーネントをサーバーサイドで「遅延レンダリング」する仕組みを提供します。

この「遅延レンダリング」が鍵で、静的なコンポーネントとは別で、動的なコンポーネントのみを必要に応じてサーバーサイドで生成することを可能とし、後からデータが揃ったタイミングでレンダリングさせられるので、初回ロード時の高速化と全体のパフォーマンス向上を実現することができ、動的コンテンツも効率的に扱えるようになります。

実装例

Server Islandsでは、

server:defer
ディレクティブを使用することで、そのコンポーネントを遅延レンダリング（初回ロード時のレンダリングをスキップ）することができます。

<UserButton server:defer />

このようにすることで初回ロード時は、このコンポーネントのレンダリングをスキップし、レンダリングを「延期」させ、後からサーバーサイドで動的に生成するようAstroに指示することができます。

こうして、初回ロード時には軽量な静的コンテンツ（HTML, CSS）のみをレンダリングし、後からパーソナライズされたインタラクティブUIコンポーネントをレンダリングすることを可能にします。

Server Islandsが特に力を発揮する場面

Server Islands機能は、ページ上に静的コンテンツと動的コンテンツが混在するコンテンツ中心型のWebサイトで特に役立ちます。

例えばECサイトの場合、最初のページ読み込み後までおすすめ商品のレンダリングを延期することで、初回ロード時には商品カタログや商品詳細を静的に表示しつつ、パーソナライズされたコンテンツを後から動的にレンダリングさせることができます。

この新しいアプローチにより、全体のパフォーマンスと柔軟性の両立を可能とし、静的コンテンツと動的コンテンツのバランスを最適化できるようになります。

Server Islandsのまとめ

  • 1. 初回ロード時の高速化、パフォーマンスの向上
  • 2. 動的コンテンツの効率的な扱い
  • 3. シンプルな実装

Server Islandsを使えば、パーソナライズされた動的コンテンツを配信しながらも、最初のページ読み込み時間を短縮することができます。

静的出力モードとハイブリッド出力モードの統合

従来のハイブリッドモードを簡素化し、静的なページと動的なページの出力をよりスムーズに統合できるようになります。

この機能により、ページごとに静的なプリレンダリングか、リクエスト時に動的にレンダリングするかを柔軟に選択できるようになります。

Astroのデフォルトでは、基本的に全てのページが静的に生成され、CDNでキャッシュされるようになっていますが、プロジェクトによっては動的コンテンツが必要な場合があります。その場合でも従来のように複雑な手順を踏まず、Astro 5.0 β（ベータ）版の静的出力モードとハイブリッド出力モードの統合により、簡単に設定ができるようになりました。

Astroの出力モード

まず、Astroは「静的出力モード」と「ハイブリッド出力モード」の2つの出力モードをサポートしています。

静的出力モード

静的出力モードは、Astroのデフォルトモードで、全てのページは静的に生成されます。このモードは主に静的コンテンツを提供するWebサイトに最適です。

ハイブリッド出力モード

ハイブリッド出力モードは、動的コンテンツが必要な場合に最適なモードです。特定のページやUIコンポーネントのみをインタラクティブにし、リクエストごとにサーバーで処理することができます。

Astro 5.0 β（ベータ）版では、これら2つのモード設定が更に簡単になった

プロジェクト「全体」が静的コンテンツである場合でも、個々のページやルートごとに動的レンダリングを設定できるようになります。

実装例

このようにフロントマター内で、特定のページのプリレンダリングを無効化してリクエスト時に動的にレンダリングする設定を行えます。

---
// プリレンダリングを無効にする
export const prerender = false;
---

もし、プロジェクトのほとんどのページが動的レンダリングされる場合は、Astroの出力モードの設定で、

output: 'server'
を以下のように設定することで、Astroはデフォルトでオンデマンドレンダリングするようになり、静的コンテンツは必要に応じてプリレンダリングするようになります。

import { defineConfig } from 'astro/config';
export default defineConfig({
  output: 'server' // サーバーサイドレンダリング
});

静的出力モードとハイブリッド出力モードの統合のまとめ

  • ・静的出力モードとハイブリッド出力モードの統合により、静的コンテンツと動的コンテンツのバランスを最適化できる。

プロジェクト全体の出力モードを一貫して管理しつつ、必要に応じて個別のページやコンポーネントに対して動的な処理を簡単に追加することができるようになりました。

さいごに

Astro 5.0 β（ベータ）版の新機能について見ていきました。

今回追加される新機能を活用することで、より効率的なコンテンツ管理や、より良いユーザー体験を提供できるようになりますね。

今後のAstroの動向にも注目していきたいと思います！

参考記事

Back to Home