BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Webフレームワーク「Astro」にハイブリッドレンダリング機能を追加し、Webサイトを高速化

Webフレームワーク「Astro」にハイブリッドレンダリング機能を追加し、Webサイトを高速化

ブックマーク

WebフレームワークAstroはAstro2.0をリリースし、これまで利用可能だった静的および動的サーバーレンダリングを、新しいハイブリッドレンダリング機能で補完した。ハイブリッドレンダリングは特定のページをあらかじめレンダリングしておくことで、より高速なパフォーマンスを実現する。

アイランド・アーキテクチャと呼ばれるフロントエンド・アーキテクチャの普及を目指すAstroのWebフレームワークは、ハイブリッドレンダリングの動機について次のように説明している

Astroは、ほぼ1年前から静的(SSG)とサーバー(SSR)のビルド出力を選択できるようにしている。静的ウェブサイトは驚異的なパフォーマンスを発揮するが、リクエストごとにHTMLをオンデマンドで生成する機能がない。

Astro 2.0では、ハイブリッドレンダリングにより、両者の長所を兼ね備えている。

静的コンテンツと動的コンテンツを混在させることで、新しい可能性を引き出す:

  • 人気ページのレンダリングパフォーマンスを向上
  • 大規模サイトの構築パフォーマンスを向上させる
  • 既存の静的サイトにAPIを追加する

以前のバージョンでは、Astroの開発者は、静的なコンテンツ主体のサイトを対象とした静的レンダリングか、すべてのウェブページを対象としたサーバーサイドレンダリングのどちらかを選択しなければならなかった。ハイブリッドレンダリングでは、デプロイされたサーバーをあきらめることなく、構築時に特定のページやサーバーエンドポイントをプリレンダリングできる。

大規模なサイトでは、プリレンダリングに適したセクションがある一方で、リクエスト時にコンテンツを生成する必要があるセクションがあることがしばしば見受けられる。例えば、電子商取引サイトでは、ホームページやマーケティングに特化したさまざまなコンテンツをプリレンダリングする一方で、製品、価格、割引のページでは、利用可能な最新データを取り込むためにサーバーレンダリングを継続することがある。ハイブリッド方式は、ウェブページの配信に必要なコンピューティングリソースの量を削減し、それに伴うコストを削減できる。

Jamstackのコンテクストで大規模サイトに有効なその他の最適化には、アプリケーションフレームワークNext.jsで一般化されたIncremental Static Regenerationがある。

また、Astroの新リリースでは、エラーオーバーレイの再設計、開発中のホットモジュールリロードのサポートの改善、新しくリリースされたVite 4.0とのコンテンツ構築も含まれている。

Astroは、コンテンツに特化したWebサイトの最適なユーザー体験を主なターゲットとしたWebフレームワークだ。この目的のために、インタラクティブなページを確保するために必要な最小限のJavaScriptを送信するように努めている。完全に静的なページでは、JavaScriptはまったく送信されない。Astroは、この目的を達成するためのアーキテクチャをIsland Architectureと名付けた。ウェブページは、静的なHTMLコンテンツと、Astro islandsと呼ばれるインタラクティブなUIコンポーネントとに分かれている。アイランドは分離してレンダリングされ、あらゆるUIフレームワーク(React、Preact、Svelte、Vue、Solid、Litなど)を使用できる。

Astroは、"スピードのために設計されたオールインワンWebフレームワーク "と自称している。実際に測定されたパフォーマンスデータ(The Chrome User Experience Report 【CrUX】The HTTP ArchiveCore Web Vitals Technology Report)に基づく独自のベンチマークによると、Astroは、比較されたWebフレームワーク(SvelteKit、Gatsby、Remix、WordPress、Next、Nuxt)から選ばれたセットよりも優れている場合が多い。

Astroは、MITライセンスのもとで配布されているオープンソースプロジェクトであり、コントリビューションとフィードバックを歓迎している。

作者について

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT