Astro

astro

• Astro
  • 概要
  • Astro が掲げる目標
  • 特徴
  • 設計原則、設計思想
    • コンテンツ駆動
    • サーバーファースト
    • デフォルトで高速
    • 簡単に使える
    • 開発者を重視
  • Astro-Islands
    • islands とは
  • 利点
  • 環境構築

概要

コンテンツ駆動の web サイトを作成する為のフレームワーク

Astro が掲げる目標

• 遅いウェブサイトを作るのはほぼ不可能になること
• すべてのウェブ開発者が利用できること
  • 必要な複雑さを可能な限り取り除く
• Astro プロジェクトの成功は人々から愛用されてこそ得られる。

特徴

• Astro Islands
• 自由な UI
• サーバーファースト
• デフォルトでゼロ JS
• コンテンツコレクション
• カスタマイズ可能

設計原則、設計思想

Astro を作成した理由、Astro が解決する問題、プロジェクトやチームにとって最良の選択肢となる理由となりうる、5 つの核によって設計されている。

コンテンツ駆動

コンテンツが豊富なウェブサイトを構築する為に設計されている。 **静的サイトジェネレーター(SSG)**としてコンテンツに焦点を当てて、利用者にパフォーマンスとパワーに優れた動的なウェブアプリケーションを作成することができる

• マーケティングサイト
• 出版サイト
• ドキュメントサイト
• ブログ
• ポートフォリオ
• LP
• コミュニティサイト
• e コマース

これまでのフレームワークは web アプリケーションを作成するために設計されている。

• ログインした管理者向けのダッシュボード
• 受信トレイ
• SNS
• ToDo リスト

サーバーファースト

ブラウザ上のクライアントサイドのレンダリングよりも、サーバーでのレンダリングを可能な限り活用する。

• 必要な場合にのみ CSR もできる。
• Astro のビュートランジションルーターを使用して、選択したページの遷移やアニメーションをより細かく制御できる。

デフォルトで高速

• コンテンツ重視とサーバーファーストのアーキテクチャを組み合わせてパフォーマンスを高めている。
• Astro の web サイトは React で構築されたサイトよりも 90%少ない
• JavaScript で 40%早く読み込むことができる。

簡単に使える

• .astro

  UI 言語は HTML のスーパーセットなので、HTML が書ければ Astro コンポーネントも書ける。
  • 通常の HTML
  • React の JSX 式
  • Svelte、Vue の CSS スコープ
• クライアントで実行される UI フレームワークコンポーネントの追加も可能。
  • React
  • Preact
  • Svelte
  • Vue
  • Solid
  • web component

Astro は他の UI フレームワークや言語よりも複雑にならないように設計されている。 理由は、SSR するように設計されているから。 サーバーサイドレンダリング（SSR）のコンテキストにおいて、リアクティビティ（状態管理やリアルタイムでのデータ更新機能）がサーバー側では機能しないことを説明しています。 リアクティビティは、主にクライアントサイド（ブラウザ）で動作する概念であり、サーバーサイドでは通常そのまま機能しません。そのため、クライアントサイドで使用される特定のツールや技術（例：React の Hooks、Vue の Refs、Svelte の Observables、または状態管理ライブラリなど）は、SSR のようなサーバーサイドのレンダリング環境では動作しないまたは消えてしまう。

開発者を重視

• ターミナルから得られる CLI 体験
• VScode の拡張機能
  • シンタックスハイライト
  • TypeScript のサポート
  • IntelliSense
• discord community

Astro-Islands

monolithic な JavaScript のパターンを避け、ページから不要な JavaScript を全て自動的に削除することで frontend の performance を向上させる。

islands とは

ページ上のインタラクティブな UI コンポーネントのこと。 アイランドはページ上の他のアイランドとは独立して動作する。

これまでのアーキテクチャと異なるのは SSG で生成された静的コンテンツを部分的に且つ動的に変更できる。 アイランドアーキテクチャ自体は、「静的コンテンツ」と「動的コンテンツ」を組み合わせる点ではこれまでの手法と似ていますが、各部分を「アイランド」という独立した単位として管理し、状態の共有や通信を意識した設計を行う点において、より柔軟でパフォーマンスの最適化が図られている点が特徴です。要するに、「部分的な動的更新」だけでなく、それぞれの部分が独立して効率的に動作し、相互に通信できる設計がポイント

利点

• パフォーマンス ウェブサイトの大部分は高速で静的な HTML に変換され、JavaScript は、それを必要とする個々のコンポーネントにのみ読み込まれます。JavaScript は、バイト単位で読み込むことができるリソースの中でもっとも遅いものの 1 つであるため、1 バイトが重要なのです。

• 並行ロード レンダリングの優先順位がない。

• コンポーネントのレンダリング方法とタイミングを支持できる。

環境構築

1. node のインストール node.js

   v18.14.1

   以降
2. astro のセットアップ

npm create astro@latest