Fetch 可让您无需编写代码即可将数据动态加载到 Framer 网站中。您可以在文本图层、组件属性以及组件内部大多数图层的“内容”属性中的“+”图标下找到“添加 Fetch”选项。在组件内部，您还可以配置加载状态和错误变体，以视觉方式呈现数据获取状态或错误。

何时使用 Fetch

Fetch 更适合用于动态或个性化数据，而不是静态内容或频繁更新的列表。如果内容可以手动输入或通过 CMS 管理，则应优先选择后者，因为 Framer 会针对 SEO 优化静态内容。

您可能会希望使用 Fetch 来获取：

• 用户特定数据（例如登录状态）

• 基于位置的信息

• 实时库存数量

• 实时股票价格

请注意，Fetch 不支持列表或大型数据集合。对于基于列表的数据（例如博客文章、产品或集合），请使用 Framer 的 CMS 集合配合 Sync API。

缓存与反规范化

Fetch 响应可缓存指定时长。缓存的响应将存储在访问者的浏览器中，在缓存过期前不会发起新的网络请求。缓存按 URL 进行，并在页面加载时发生。

缓存通过减少不必要的网络请求来降低服务器负载并提升性能。它还能优化那些频繁变化但不需要实时更新的数据，确保新鲜度与效率之间的平衡。

对于高度动态的数据，您可以设置较短的缓存时间。一旦过期，Fetch 将立即重新加载数据，而无需等待下一次页面加载。

凭据

凭据选项控制是否随 Fetch 请求发送浏览器凭据（例如 cookies）：

• 同源（默认）：仅对同一域名的请求发送凭据。

• 包含：即使跨域请求也会发送凭据，适用于需要 cookies 的认证接口（例如登录状态）。

请注意，在画布（Canvas）中使用“包含”凭据的 Fetch 可能无法按预期工作，因为 Framer 内部无法访问实时站点的 cookies。此外，请避免包含敏感数据，因为它会被打包进您的 JavaScript 中，可能造成信息泄露。

自定义 API 端点

与 Fetch 配合使用的 API 端点必须是公开可访问的。出于安全考虑，请设置一个专用的后端服务，仅向您的 Framer 网站暴露所需的数据。

有关安全后端设置的更多信息，请参阅 开发者文档。