静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に

今回は「静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に」についてご紹介します。

関連ワード （個別、利用、原因等） についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。

オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.0」が正式にリリースされました。

Astro 2.0 – our most exciting release yet!https://t.co/FPb5rBTRPT

— Astro (@astrodotbuild) January 24, 2023

Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。

ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全くJavaScriptが含まれないか、もしくはWebブラウザ上での動作に必要な最小限のJavaScriptのみが残されます。

そのため、非常に高速に表示されるWebサイトの生成が可能である点が、Astroの大きな特徴です。

Astro 2.0では主に以下の新機能の追加や変更が行われました。

大規模サイトに対応するContent Collections

Astro 2.0でのWebサイトのコンテンツの記述方法としては、Makdownファイルや、MarkdownとJSXを組み合わせたMDXファイルが用いられますが、コンテンツファイルが大量になってくるにつれ、ファイル管理の手間が増えてきます。

また、MarkdownファイルやMDXファイルが正しく記述されていないことが原因でビルド時にエラーが発生すると、エラーの原因を確認する手間も増えてくるでしょう。

こうした課題を解決するためにAstro 2.0で導入されたのがContent Collectionsです。

Excited for Typesafe Markdown?
Let's explore Content Collections, now built-in with Astro 2.0 https://t.co/zp5CZhDURU

— Astro (@astrodotbuild) January 25, 2023

Content Collectionsでは、コンテンツとなるMarkdownファイルやMDXファイルを「blog」や「newsletter」「products」など、コンテンツのジャンルや種類ごとにディレクトリに分けて管理できるようになります。

さらにディレクトリごとに、例えばタイトルや日付などが抜けていたり、間違った内容が記述されていないか、文法エラーはないかといったフォーマットをチェックするためのTypeScript形式によるスキーマ定義とチェックが可能になりました。

このスキーマ定義には型も含まれており、各Markdownファイルの先頭に、タイトルや日付、カテゴリなど、そのコンテンツ個別の情報をFrontmatterと呼ばれるフォーマットで記述されている内容などが、型に適合するかもチェックされます。それゆえ、Astro 2.0のContent Collectionsは「Type-Safe Markdown」を実現するとも説明されています。

これにはオープンソースのZodが用いられています。

Hybrid Rendering

Astroはこれまでも静的サイト生成（Static Site Generator：SSG）と動的なサーバサイドレンダリング（Server Side Rendering：SSR）のどちらかを選択することができました。

Astro 2.0ではこの両者の混在が「Hybrid Rendering」として可能になりました。

Hybrid Renderingでは、SSR対応のコンフィグレーションにおいて、特定のページもしくはエンドポイントに対する設定を行うことで、その部分はプリレンダリングによる静的生成を行うことが可能になります。

これによりSSGによる高速なWebサイトでありながらSSRによる動的なWebページを備えたWebサイトをAstroで容易に構築可能となりました。

Vite 4.0の対応や新しいロードマップなど

そのほか、Astro 2.0では以下のような新機能の追加やアップデートなどが行われています。

Redesigned Error Overlays
エラー発生時に表示される開発者向け画面が改善され、より詳しい情報などが表示されるようになりました。

Improved Dev Server (HMR)
Hot Module Reloading（HMR）周りを中心に性能や安定性を継続的に改善していくことと説明されています。

Vite 4.0
Astro内部で利用しているビルドツールが、最新のVite 4.0にアップデートされました。

A New Public Roadmap
今後のロードマップがよりオープンで分かりやすくなっています。