Pendahuluan
Sebagai Frontend Developer...
rasanya kita semua pernah membuat project tanpa backend.
Entah karena memang tidak memakai backend...
atau mungkin backend-nya memang belum sempat dibuat. :)
Biasanya data tidak lagi diambil dari API.
Melainkan disimpan langsung di dalam project. Ada yang membuat data.ts, data.tsx, ada juga yang lebih suka memisahkannya menjadi file .json.
Hal seperti ini sudah cukup umum.
Apalagi kalau project-nya hanya sebatas portofolio, landing page, company profile, atau project gabut pengisi waktu luang yang entah kapan akan dilanjutkan lagi. Yang jelas, datanya tidak akan berubah sampai suatu hari muncul niat untuk refactor.
ㄟ( ▔, ▔ )ㄏ
Nah...
yang jadi pertanyaan bukan lagi di mana datanya disimpan.
Tapi...
bagaimana data itu diproses? Secara statis atau justru secara dinamis?
Pembahasan
Kalau datanya disimpan sebagai object atau array di dalam data.ts, data.tsx, atau folder data/ yang isinya penuh file TypeScript...
rasanya kita semua sudah tahu.
Data tersebut sudah menjadi bagian dari source code aplikasi.
Lalu...
bagaimana kalau data tersebut dipisahkan menjadi file .json?
Data Statis dan Data Dinamis
Sebelum lanjut ke sana...
kita samakan dulu pemahamannya.
Menurut saya, sesederhana ini.
Data statis adalah data yang nilainya sudah ditentukan sejak awal dan tidak berubah selama aplikasi berjalan.
Kalau suatu hari datanya berubah, kita harus mengubah source code atau file yang menyimpan data tersebut, kemudian melakukan build ulang agar perubahan itu ikut digunakan.
Sedangkan data dinamis adalah data yang nilainya dapat berubah ketika aplikasi sedang berjalan, tanpa harus melakukan proses build ulang.
Perubahannya bisa berasal dari server, database, API, atau sumber data lain yang diambil saat aplikasi sedang berjalan.
Nah...
sekarang mungkin kalian sudah punya gambaran sederhana mengenai perbedaan keduanya.
Bagaimana Jika Menyimpannya Sebagai File JSON
Nah...
sampai di sini mungkin muncul pertanyaan lain.
Kalau datanya sudah menjadi file .json...
cara mengambilnya bagaimana?
...
Setidaknya...
ada dua cara yang paling sering saya temui.
Dan lucunya, dua-duanya sama-sama sering dipakai. (￣▽￣*))
Yang pertama...
file JSON disimpan di folder @/data/ atau di mana saja
lalu cukup di-import.
import projects from "@/data/projects.json";
Selesai.
Ya.
Sudah.
Begitu saja. (￣▽￣)
Tinggal dipakai seperti object atau array pada umumnya.
Cara kedua...
file JSON diletakkan di folder public.
Lalu ketika dibutuhkan...
tinggal fetch.
const response = await fetch("/projects.json");
const projects = await response.json();
Cara seperti ini juga cukup sering saya temui.
Apalagi kalau project tersebut suatu saat akan memakai backend.
Karena ketika nanti datanya dipindahkan ke API, cara mengambilnya hampir tidak banyak berubah.
Masih sama-sama menggunakan request HTTP.
Menggunakan import
Saat menggunakan import, file JSON akan ikut diproses ketika aplikasi di-build.
Jadi ketika aplikasi dijalankan, datanya sebenarnya sudah siap digunakan.
Makanya kita tinggal mengaksesnya seperti object biasa.
Menggunakan fetch()
Kalau fetch() sedikit berbeda.
Browser akan melakukan request HTTP ketika aplikasi sedang berjalan.
Tidak harus ke REST API.
Bisa juga ke file JSON, gambar, video, atau resource lain yang memiliki URL.
Sederhananya...
selama resource tersebut bisa diakses melalui HTTP, fetch() bisa mengambilnya.
Penutup
Kalau dipikir-pikir...
ternyata bukan file JSON yang menentukan apakah data tersebut bersifat statis atau dinamis.
Yang menentukan justru bagaimana kita menggunakannya di dalam project.
File yang sama...
bahkan isi yang sama...
bisa saja diproses dengan cara yang berbeda sesuai kebutuhan aplikasi.
Dan menurut saya, di situlah menariknya.
Kadang yang kita anggap hanya "tempat menyimpan data", ternyata juga ikut memengaruhi bagaimana aplikasi memperlakukan data tersebut.
Kalau memang project-nya mulai memiliki data yang bersifat sensitif, sebaiknya jangan lagi menyimpannya di frontend.
Karena apa pun yang sudah dikirim ke browser, pada dasarnya sudah menjadi konsumsi publik.
Sisanya...
ya biarkan backend yang bekerja.
Frontend tidak perlu ikut menyimpan semua hal.
Toh itu memang urusan backend
(￣▽￣)
oke... terimakasih
Don't forget a cup of coffee today ☕
Top comments (0)