How to use Fetch

Getting Started

Fetch lets you add pieces of dynamic data on your Framer site without code. You'll see an “Add Fetch” option under the “+” icon on the Content property of Text layers as well as on Component Properties and most layers inside Components. Additionally, inside Components you can add Loading and Error Variants to configure what the Component should look like when data is being Fetched.

For more details on how to use Fetch, check out the updates post.

When to use Fetch

A good rule of thumb for using Fetch is that if information can be typed onto your site manually or into your CMS, then you should do that, as Framer better optimised static information like that for SEO. Fetch is optimised for data that is naturally very dynamic or personalised to the person using the site. This could be anything from Location and Login state, to live inventory count and stock values.

Credentials

Credentials option can be used to configure when credentials (like cookies) are included in the Fetch request. Same Origin is the browser's default behavior and means that credentials are only included to requests on the same Origin.

With the Include credentials option you can configure the Browser to include credentials, even if the URL of the endpoint does not live on the same Origin as where the site is served from. This can be used to retrieve data from an authenticated endpoint using Cookies stored on the site. This is commonly used for things like displaying Login state.

Note: When Credentials is set to Include test requests may not work as expected on the Framer Canvas because inside Framer the cookies from your live site are not present.

Caching

You can configure your Fetches to be cached for a given duration. When a cache is set, the results of a Fetch are cached and saved into the visitor's storage in the Browser. If the user visits the site again within the configured cache duration, the stored value is used and no requests are made to the endpoint.

Additionally when a short cache time is configured, Fetch will automatically reload the data from the endpoint after the cache duration has passed. This can be used for displaying highly dynamic data that changes often.

Custom APIs endpoints

Any API endpoints that are used with Fetch need to be configured in such a way that they can be safely accessed from the public internet. In many cases we recommend having a small backend setup dedicated to serving only the required data for your website in a safe way. Learn more about building backends for Fetch in the developer documentation.