Apa itu Fetch?

Fitur Fetch di Framer adalah alat yang berguna untuk memuat data secara otomatis ke situs tanpa memerlukan kode. Dengan fitur ini, bisa menyiapkan status Loading atau Error di dalam komponen untuk memperlihatkan situasi pemuatan atau kesalahan data secara visual.

Note: Di layer Text atau pada Component Properties untuk Content 속성, dengan mengklik ikon +, Anda dapat menemukan opsi “Add Fetch”.

Kapan harus menggunakan Fetch?

Fetch lebih cocok untuk konten dinamis atau data yang dipersonalisasi daripada konten statis. Framer CMS dioptimalkan untuk SEO dan cocok untuk pengelolaan konten statis. Jadi, jika ingin menampilkan data yang tidak sering berubah (misalnya daftar blog, daftar produk), mengelolanya melalui CMS Collections adalah cara yang efektif.

Berikut adalah situasi di mana Fetch dapat digunakan.

• Data spesifik pengguna (misalnya: status login)

• Informasi berbasis lokasi seperti cuaca

• Jumlah stok atau perubahan harga secara real-time

• Data harga saham atau nilai tukar yang real-time

Note: Fetch tidak mendukung daftar atau koleksi data besar. Untuk data berbasis daftar (misalnya posting blog, produk atau koleksi), direkomendasikan menggunakan kombinasi CMS Collections dan Sync API.

Fitur Caching Fetch dan pembaruan data

Fetch di Framer mendukung fitur Caching selama periode yang ditentukan.

Respon yang di-cache disimpan di browser pengunjung dan dapat diambil tanpa permintaan jaringan baru hingga cache tersebut kadaluarsa. Caching dilakukan berdasarkan URL dan terjadi saat halaman dimuat.

Keuntungan Caching

• Meminimalkan permintaan jaringan yang tidak perlu, mengurangi beban server, dan meningkatkan kinerja.

• Mengoptimalkan data yang sering berubah tetapi tidak memerlukan pembaruan real-time, menjaga keseimbangan antara aktualitas dan efisiensi.

• Untuk tipe data yang sangat otomatis, Anda dapat menetapkan periode cache yang singkat. Setelah periode cache habis, Fetch akan mengambil data baru segera tanpa menunggu hingga halaman berikutnya dimuat.

Memahami pengaturan Credentials

Fetch memiliki opsi Credentials, yang memastikan dan mengontrol apakah kredensial browser (misalnya cookie) akan dimasukkan dalam permintaan Fetch.

• Same Origin (default): Mengirim cookie hanya saat permintaan ke domain yang sama.

• Include(nilai termasuk): Saat meminta domain lain yang memerlukan cookie dalam situasi endpoint yang autentikasi (misalnya status login), cookie akan dikirim bersama-sama.

Poin perhatian saat mengatur

• Di Framer, informasi cookie dari situs live tidak dapat diakses. Akibatnya, opsi cookie saat menggunakan Fetch “Include” mungkin tidak berfungsi dengan baik di Canvas.

• Jangan sertakan data sensitif secara langsung di dalam JavaScript karena risiko terekspos.

Saat menghubungkan ke API yang memerlukan keamanan

API endpoint yang digunakan dengan Fetch harus dapat diakses secara publik. Jika memerlukan keamanan, disarankan untuk membuat layanan backend terpisah yang hanya mengekspos data yang diperlukan untuk situs FramerFramer, bukan seluruh data.

Untuk lebih detail tentang pengaturan backend yang aman, silakan merujuk pada dokumen pengembang.

Artikel ini adalah terjemahan dan adaptasi dari konten blog resmi Framer ‘How to use Fetch’.