AstroとOptimizely SaaS CMSパート4を使用してヘッドレスブログを作成します –

シリーズに新しい人のために、あなたは読みたいかもしれません パート1、 二、 そして 三つ 初め。

最後の投稿の終わりに、私は探求するもう2つのアイデアがあると言いました：

1. 1. 純粋に視覚的なビルダーコンテンツをレンダリングします
   2. 静的ではなく、すべてを動的にレンダリングします。

それをしましょう。

静的からサーバー側までレンダリングされた（SSR）

始めた 新しいサーバー側のレンダリングバージョン に追加されたすべての上に構築されるデモサイトの 静的サイトバージョン。これは、Vercelの新しいビルドをトリガーする必要なく、CMSのコンテンツの変更がSSR Webサイトバージョンにほぼ瞬時に表示されるようになりました。コンテンツの変更が多いサイトの場合、これは、静的サイトバージョンで使用したWebhookプロセスと比較して、はるかに適切なアプローチになります。

コアの変更は変化していました Astro.config.mjs 静的出力から「出力： ‘server」まで。この変更により、Astroはすべてのページの事前ビルディングをHTMLファイルに停止し、代わりにユーザーがリクエストしたときに各ページをサーバー上にレンダリングするように指示されます。

また、適切なものをインストールする必要がありました サーバーアダプター、この場合、このデモがvercelで実行されているため、@astrojs/vercel`。

これは、更新が頻繁に発生するコンテンツが多いサイトに最適で、グラフでインデックスが表示されるとすぐに変更が反映されます。

タイプスクリプト

前回の投稿で、TypeScriptタイプを自動的に作成することで、GraphQL統合を改善できると述べました。私は新しいバージョンでより多くの変更を行っていると思ったので、それも追加するかもしれません。

`@graphql-codegen/cli`パッケージをインストールし、セットアップします codegen.ts 構成ファイルでは、単一のコマンドを実行できます： `npm run codegen`。

このコマンドは、Optimizelyグラフエンドポイントに接続し、クエリをスキャンします Apollo-client.ts、およびそれらのタイプスクリプトタイプを自動的に生成します。開発するとき、これは次のことを意味します。

• フルタイプセーフティ： コンテンツアイテムで利用可能なフィールドを推測することはもうありません。

• インテリジェントオートコンプリート： コードエディターはスキーマを知っているため、クエリを書き込み、データをはるかに高速で使用することができます。

すべてのページとコンポーネントのレイアウトを更新して、生成されたタイプのインポートを使用する

import type { StartPage, ArticlePage as ArticlePageType } from '../gql/graphql';

これは、開発者エクスペリエンスと、実際のプロジェクトで必要なものにとって大きな改善です。

エクスペリエンスとビジュアルビルダーを追加します

SSRバージョンは、経験を備えたOptimizelyのVisual Builderを適切にサポートしています。

始めるために3つを含めました：

1. Experiencehero： 背景画像とテキストオーバーレイを備えた、シンプルで再利用可能なフル幅のヒーローバナー。

2. experenceCarousel： レスポンシブ画像グリッドを作成するため。

3. emvenyerte： あらゆる種類のフォーマットされたテキストコンテンツを表示するための標準的なリッチテキストエディター。

リポーネントフォルダーでリポーネントフォルダーで見つけることができます。 https://github.com/jacobpretorius/opti.saas.astro.demo/blob/main/ssr/src/components/experiencehero.astro

コンテンツエディターは、CMS内のエクスペリエンスページタイプでこれらを作成し、それらを見ることができます ページにレンダリングされます。

ビジュアルビルダーはすでに長い道のりを歩んできました。

キャッシング

グラフの応答は比較的迅速であるように見えますが、ご想像のとおり、リクエストごとに外部ソースからページコンテンツをロードする必要があるサーバー側のレンダリングページは、応答HTMLのストリーミングを即座に開始できる静的サイトほどパフォーマンスがありません。

ありがたいことに、サーバー上のメモリ内キャッシュはまだ可能です。そこで、すべての通常のページロード（非プレビューモード）に2分間のキャッシュを追加しました。最初の新しいグラフリクエストのみが2分ごとにグラフに出されます。キャッシュ構成を確認して変更できます Apollo-client.ts。

結論

この新しいSSRバージョンは、アストロと最適なSaaS CMSを備えた建物のためのはるかに堅牢で動的な基盤です。インスタントコンテンツの更新の力と真の視覚編集体験を最前線にもたらし、タイプ生成により開発プロセスをより効率的にします。

簡単なブログから私の例をアップグレードします（私のように）より複雑でコンテンツが豊富なエンタープライズサイトに使用できるものに。

次回は統合を検討します 新しいベータ版は、content-js-sdkを最適化します。

あなた自身のライブデモとコードをチェックしてください

次回もまた会いましょう

2025年7月21日