Astro初心者日記1
こんにちは！普段フロントエンド開発をしているまるです🙌
4月になって桜と花粉症の季節になってきましたね〜🌸
最近Astroを勉強しているので、自分の勉強ノートを兼ねて「SSGって何？？」ってなっているくらいの初心者の方にもわかるように内容をお伝えできればなって思ってます。
そもそもAstroってなんだ
Astroというのは一言で言うと、「静的サイト生成を行うためのフレームワーク」です。
静的と出てくるのであればもちろん動的サイトも存在します。
静的・動的サイトの違いとそれぞれのメリット
Chat GPTさんにそれぞれの概要・メリット・使われる例を聞いてみました。
静的サイト
あらかじめ作成したHTMLファイルをそのままユーザーに配信する形式
<メリット>
-
高速なページロードが可能。
-
セキュリティが高い
-
コストが低い
-
スケーラビリティに優れる
-
簡単な管理・運用
<使われる例>
個人ブログ・企業の情報サイト・小規模なビジネスサイトなど
動的サイト
ユーザーのリクエストに応じてサーバー側でリアルタイムにHTMLを生成する形式
<メリット>
-
ユーザーに応じたパーソナライズ
-
リアルタイムデータの表示
-
複雑なインタラクションが可能
-
データベースとの連携
-
複数ページを管理する場合に便利
-
リッチな機能が可能
<使われる例>
ソーシャルメディアサイト・株価情報の表示・フォーム入力によるコンテンツ表示・大規模なショッピングサイトなど
AstroはReactなどのコンポーネントライブラリに対応しており、Next.jsなどのフルスタックフレームワークのSSGモードについて学習するよりも少ない学習コストで直感的に使うことができます。
静的サイト生成(SSG)ってなんだ
静的サイト生成SSGについてSSRと比較しながらお伝えします。
もう何かわかってるよ〜って方は次に進んでください！
| SSG | SSR | |
|---|---|---|
| 名称 | Static Site Generation | Server-Side Rendering |
| 生成タイミング | ビルド時に静的なHTMLファイルを生成します。 | リクエストがあるたびにサーバーでページを動的に生成します。 |
SSRであってもSSGであってもサーバーでビルドしてページを生成することは一緒です。
要するに、SSRはユーザーがページを開くたびにページを生成するのに対して、SSGはビルド時に一回だけページを生成するよと言うことになります。
SSGを使用すると言うことは、コンテンツが変わるタイミングでビルドを行い、HTMLを更新する必要がある！と言うことにもなります。
AstroのclientってSSG関係あるの？
Astroでコンポーネントを書くときにclient:visibleやclient:loadなどと指定する時があります。
(clientのパラメータの種類はドキュメント見てください〜)
client:visibleは、そのコンポーネントが画面内に表示されたら読み込むみたいな動きだってことはなんとなーくわかっていたのですが、
これってSSGに影響しないの…？
そもそもWebページには「静的な部分」と「動的な部分」があります。
例えば、
静的な部分だと、文章や画像だけの表示
動的な部分だと、タブ切り替えやスライダーやチャートなど
基本的にAstroはSSGなので全部静的に作られます。
けど、ボタンなどの動くパーツ = インタラクティブなコンポーネントが必要な時もある…
こんな時はclient:*指示！！って感じになります。
clientは「クライアントサイドでインタラクティブなコンポーネントをいつ読み込むか」を制御することです。
もっと簡単に言うと、「ここは後からこのタイミングでブラウザで動かしてね〜」とお願いすることです。
と言うことは、ビルド自体には関係ない = SSGとしてビルドされる となります。
ここで、インタラクティブなコンポーネントって具体的に何😕ってなりますよね⁉︎
インタラクティブなコンポーネントってなんだ
動くパーツといえばhoverしたときのスタイルとかそう言うやつ？と最初思っていたのですが、インタラクティブなコンポーネントとはそう言う意味ではありませんでした。
hoverに関するスタイルの変更はCSSのみで動くため、クライアント側のJavaScriptは関係ありません。
CSSのスタイルの変化のみであれば全然静的なページだけでOK🙆♀️
じゃあインタラクティブな部品とは？？
＝ JavaScriptでユーザーの操作に反応して中身が変わるもの
例えば
- ボタンクリックでカウンターの数字が増える
- フォーム入力で即時に値が変わる
- スクロール量でアニメーションをつける など…
例のように、JavaScriptで状態や中身が変わるようなことをするコンポーネントがインタラクティブなコンポーネントって呼ばれます。
まとめ
Astroの導入以前のお話ばかりでしたが、私の学習速度に合わせていくつかOutputしていくつもりです！
何か間違っていることやこの言葉なんだ？みたいなことがあれば気軽にコメントお待ちしています🙌
Discussion