This document aims to alleviate the difficulties faced by Korean users learning Framer due to a lack of Korean resources. We translated content from the official blog into Korean and added practical information. We hope it offers some assistance to users of Framer.

What is Fetch?

Framer's Fetch feature is a useful tool that allows you to automatically retrieve data and display it on your site without coding. Within components, you can visually express loading or error circumstances by setting up Loading or Error states.

Note: By clicking the + icon in the Text layer or the Component Properties' Content attribute, you will find the “Add Fetch” option.

When should you use Fetch?

Fetch is more suitable for dynamic or personalized data than static content. Framer CMS is optimized for SEO and fits well with static content management. Therefore, if you want to display data that doesn't change often (e.g., blog post lists, product lists), managing it through CMS Collections is an effective method.

Here are scenarios where Fetch can be used:

• Data specific to users (e.g., login status)

• Location-based information like weather

• Real-time inventory levels or price changes

• Real-time stock data, such as exchange rates

Note: Fetch does not support list or large data collections. It is recommended to use a combination of CMS Collections and Sync API for such list-based data (e.g., blog posts, products, or collections).

Understanding Fetch's Caching feature and data renewal

Framer’s Fetch supports a caching feature for a specified period.

Cached responses are stored in the visitor’s browser allowing for retrieval without new network requests until the cache expires. Caching occurs by URL when the page loads.

Benefits of Caching

• Minimizes unnecessary network requests, thereby reducing server load and enhancing performance.

• Optimizes data that changes frequently but doesn't require real-time updates, maintaining a balance of freshness and efficiency.

• For very automatic data, you can set a short cache period. Once that period expires, Fetch immediately reloads new data without waiting for the next page load.

Understanding Credentials settings

Fetch includes a Credentials option to check and control whether browser credentials (e.g., cookies) are included in Fetch requests.

• Same Origin (default): Sends cookies only when requesting the same domain.

• Include: Useful when requesting authenticated endpoints (e.g., login status) from different domains where cookies are needed.

Points to consider when setting

• Framer cannot access cookie information on live sites. Therefore, using Fetch with “Include” cookies might not function correctly in Canvas.

• Sensitive data should not be directly included as it might be exposed in JavaScript.

When connecting to an API where security is crucial

API endpoints used with Fetch must be publicly accessible. For cases requiring security, avoid exposing all the data directly and set up a separate backend service that only exposes the necessary data to the Framer site.

For detailed information on secure backend setup, please refer to the developer documentation.

This article is content translated and adapted from Framer's official blog ‘How to use Fetch’.