본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Fetch란 무엇인가요?

Framer의 Fetch 기능은 코드 없이도 자동적으로 데이터를 불러와 사이트에 표시할 수 있는 유용한 도구입니다. 이 기능을 통해 컴포넌트 내부에서는 Loading이나 Error 상태를 설정하여 데이터 로딩이나 오류 상황을 시각적으로 표현할 수도 있습니다.

Note: Text 레이어나 Component Properties의 Content 속성에서 + 아이콘을 클릭하면 “Add Fetch” 옵션을 찾을 수 있습니다.

언제 Fetch를 사용해야 하나요?

Fetch는 정적 콘텐츠보다는 동적이거나 개인화된 데이터에 적합합니다. Framer CMS는 SEO에 최적화 되어있고, 정적인 콘텐츠 관리에 적합합니다. 따라서 자주 변경되지 않는 데이터 (예: 블로그 글 목록, 제품 리스트 등)를 표시하고 싶다면 CMS Collections를 통해 관리하는 것이 효과적인 방법입니다.

Fetch를 사용할 수 있는 경우는 다음과 같습니다.

• 사용자별 데이터 (예: 로그인 상태)

• 위치/날씨와 같은 지역 기반 정보

• 실시간 재고 수량이나 가격 변동

• 주식, 환율 등의 실시간 주가 데이터

Note: Fetch는 리스트나 대용량 데이터 컬렉션은 지원하지 않는데요. 이런 목록 기반 데이터(예: 블로그 게시물, 제품 또는 컬렉션)의 경우에는 CMS Collections와 Sync API 조합하여 사용하는 것을 추천합니다.

Fetch의 Caching 기능과 데이터 갱신

Framer의 Fetch는 지정된 기간 동안 Caching 기능을 지원합니다.

캐시된 응답은 방문자의 브라우저에 저장되며, 해당 캐시가 만료될 때까지 새로운 네트워크 요청 없이 검색이 가능합니다. Caching은 URL별로 이루어지며 페이지 로드 시에 발생합니다.

Caching의 장점

• 불필요한 네트워크 요청을 최소화하여, 서버 부하를 줄이고 성능을 향상시킵니다.

• 자주 변경되지만 실시간 업데이트가 필요하지 않은 데이터를 최적화하여, 최신성과 효율성의 균형을 유지합니다.

• 매우 자동적인 데이터의 경우 짧은 캐시 기간을 설정할 수 있습니다. 해당 캐시 기간이 만료되면 Fetch는 다음 페이지가 로드될 때까지 기다리지 않고, 새 데이터를 즉시 다시 불러옵니다.

Credentials 설정 이해하기

Fetch에는 Credentials 옵션이 있는데요. 이는 브라우저의 자격 증명(예: 쿠키)이 Fetch의 요청에 포함되는지 여부를 확인하고 제어합니다.

• Same Origin (기본값): 동일한 도메인으로 요청할 때만 쿠키를 전송합니다.

• Include(포함된 값): 인증된 엔드포인트(예: 로그인 상태)가 쿠키가 필요한 상황에서, 이때 유용한 다른 도메인을 요청할 시 쿠키를 함께 전송합니다.

설정 시 주의할 점

• Framer에서는 라이브 사이트의 쿠키 정보를 접근할 수 없습니다. 이때문에 “Include” 옵션 쿠키로 Fetch를 사용하면 Canvas에서 정상 작동하지 않을 수 있습니다.

• 민감한 데이터는 JavaScript에 포함되어 노출될 위험이 있기 때문에, 이를 직접적으로 포함하지 말아야 합니다.

보안이 중요한 API 연결 시

Fetch와 함께 사용되는 API 엔드포인트는 공개적으로 접근이 가능해야 하는데요. 보안이 필요한 경우, 모든 데이터를 그대로 노출하지 말고 Framer 사이트에 필요한 데이터만 노출하는 별도의 백엔드 서비스를 설정하시길 추천드립니다.

보안 백엔드 설정에 대한 자세한 내용은 개발자 문서를 참조해주시길 바랍니다.

본 글은 Framer 공식 블로그의 ‘How to use Fetch’를 번역·각색한 콘텐츠입니다.