Astro と Optimizely SaaS CMS でヘッドレス ブログを構築する

私は適切な仕事に適切なツールを使うことを強く支持しています。 私も大ファンです アストロ適切なユースケースのために。

Astro について詳しく調べて、Astro の概要と、それを使用して Optimizely SaaS CMS サイトを構築する方法を確認しましょう。

アストロとは

Astro は自らを「コンテンツ主導型 Web サイト向けの Web フレームワーク」と呼んでいますが、これは非常に魅力的で、Optimizely SaaS CMS で素晴らしいヘッドレス コンテンツ配信の世界に参入する私たちにとって非常に関連性のあることです。

今後数年間に私たちが構築するヘッドレス サイトの多くは、「コンテンツ主導型」(すべての Web サイトがそうでしょうか?) というだけでなく、「コンテンツ重視型」にかなり傾倒することになると思います。

Astro のチームは、あらゆる Web エクスペリエンスに対応する JavaScript フレームワークを構築しようとしているわけではなく、非常に特殊な種類の Web サイトを対象としています。これにより、フレームワークとすぐに使用できる最適化を使用して独自の判断を下す余裕が生まれます。

の なぜアストロなのか このページには、特に注目すべき重要な情報がいくつかあります。

• UIに依存しない: React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web コンポーネントなどをサポートします。

• サーバーファースト: 訪問者のデバイスから高価なレンダリングを取り除きます。

• デフォルトでゼロJS: クライアント側の JavaScript が減り、サイトの速度が低下します。

しかし、Astroチームは、静的サイト、SPA、PWA、そして他のフレームワークで構築できるコンテンツ主導のサイト間の境界線がすぐに曖昧になることを知っています。そのため、彼らはこれを持っています。 島々 コンセプトでは、Astro プロジェクト内で React/Vue/Svelte の「コンポーネント」を使用でき、ビルド時にこれらのフレームワークからのオーバーヘッドがすべて取り除かれ、動的コンポーネントを動作させるために必要な JavaScript のみが提供されます。

考えてみれば、これらの最適化によって多くの可能性が開かれ始めます。

このセクションの最後は、 設計原則彼らの偏見を明確に説明するのに役立つと思う

1. コンテンツ主導: Astro はコンテンツを紹介するために設計されました。

2. サーバーファースト: サーバー上で HTML をレンダリングすると、Web サイトの実行速度が速くなります。

3. デフォルトで高速: Astro で低速の Web サイトを構築することは不可能であるはずです。

4. 使いやすい: Astro で何かを構築するのに専門家である必要はありません。

5. 開発者重視: 成功するには必要なリソースが必要です。

Nextjsについて

Nextjsは、ほとんどのOptimizely SaaS実装のデフォルトの実装選択肢になると思われますが、Optimizely デモ実装 また、next も使用してください。Nextjs 自体は Vercel によって資金提供されており、React エコシステムで構築されているため、比較的安定しています。

Nextjs に多少なりとも精通しているなら、おそらくこの 2 つのフレームワークには多くの共通点があると思われるでしょう。その通りです。いつものように、結局はユースケース次第です。

ここでは賛否両論を論じるつもりはありませんが (今後の記事で論じるかもしれません)、どちらのオプションでもうまく機能すると思われる最も単純な使用例を検討したいと思います。

ブログを作ろう

いくつかのページといくつかの記事がある静的サイトよりもシンプルなものは何でしょうか? ここで構築して共有できるほどエキサイティングなものは思いつきません。

ありがたいことに、Astroでまともなブログを構築するのは ばかばかしいほど 簡単だ。冗談じゃない。 個人ブログ 自分で構築したカスタム CMS から Astro に 1 日もかからずに移行し、その過程でさらに改善されました。

私は Astro ブログ テンプレートを作成し、それを SaaS CMS Optimizely Graph に接続しました。すると、なんと、機能する Web サイトが完成しました。

こちらをご覧ください https://opti-saas-astro-static-demo.vercel.app

次の投稿では、コードを少し説明し、どのようにすべてが組み合わされているかを共有しますが、興味のある方はここで見つけることができます。 https://github.com/jacobpretorius/Opti.SaaS.Astro.Demo

2024年5月28日