目次
目次
Fetchとは何ですか？
FramerのFetch機能はコードなしで自動的にデータを取得し、サイトに表示できる便利なツールです。この機能を通じて、コンポーネント内部でLoadingやError状態を設定し、データの読み込みやエラー状況を視覚的に表現することもできます。
注意: TextレイヤーやComponent PropertiesのContentプロパティで+アイコンをクリックすると「Add Fetch」オプションが見つかります。
いつFetchを使用するべきですか？
Fetchは静的なコンテンツよりも動的またはパーソナライズされたデータに適しています。Framer CMSはSEOに最適化されており、静的なコンテンツ管理に適しています。そのため、頻繁に変わらないデータ（例: ブログ記事リスト、製品リストなど）を表示したい場合は、CMS Collectionsで管理するのが効果的です。
Fetchを使用する場合には以下のものがあります。
ユーザーごとのデータ（例: ログイン状態）
位置/天気などの地域情報
リアルタイムの在庫数や価格変動
株価、為替などのリアルタイム市場データ
注意: Fetchはリストや大容量データコレクションをサポートしていません。そのようなリストベースのデータ（例: ブログ投稿、製品またはコレクション）には、CMS CollectionsとSync APIを組み合わせて使用することをお勧めします。
Fetchのキャッシング機能とデータ更新
FramerのFetchは指定された期間中キャッシング機能をサポートしています。
キャッシュされた応答は訪問者のブラウザに保存され、そのキャッシュが期限切れになるまで新しいネットワークリクエストなしで検索が可能です。キャッシングはURLごとに行われ、ページロード時に発生します。
キャッシングの利点
不要なネットワークリクエストを最小化し、サーバー負荷を減らしてパフォーマンスを向上させます。
頻繁に変わるがリアルタイムの更新が必要ないデータを最適化し、新鮮さと効率性のバランスを保ちます。
非常に自動化されたデータの場合、短いキャッシュ期間を設定できます。このキャッシュ期間が満了する時、Fetchは次のページのロードを待たずに新しいデータを即座に再取得します。
Credentials設定を理解する
FetchにはCredentialsオプションがあります。これは、ブラウザの資格情報（例: クッキー）がFetchのリクエストに含まれるかどうかを確認して制御します。
Same Origin（デフォルト）: 同一ドメインへのリクエスト時のみクッキーを送信します。
Include(含まれた値): 認証されたエンドポイント（例: ログイン状態）がクッキーを必要とする状況で、異なるドメインをリクエストする際にクッキーを一緒に送信します。
設定時の注意点
Framerではライブサイトのクッキー情報にアクセスできません。これにより、“
Include”オプションを使用したFetchはCanvasで正常に動作しない可能性があります。機密データは
JavaScriptに含まれて露出するリスクがあるため、直接含めないようにするべきです。
セキュリティが重要なAPI接続時
Fetchと共に使用されるAPIエンドポイントは公開アクセスが可能でなければなりません。セキュリティが必要な場合、データをそのまま公開せず、Framerサイトに必要なデータだけを露出する別途のバックエンドサービスを設定することをお勧めします。
セキュリティバックエンド設定の詳細については開発者ドキュメントをご参照ください。
この文章はFramer公式ブログの‘How to use Fetch’を翻訳・編集したコンテンツです。
