Advanced · Level 18: Backend Basics for Frontend EngineersAdvanced55 menitBahasa Indonesia

Redis Basics

Mengenali kapan cache, session store, atau queue-like infrastructure mungkin terlibat agar frontend tidak salah membaca stale data atau delayed product state.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan Redis sebagai data structure server pada level konsep
Mengenali cache, session-like store, dan queue-like use case sederhana
Membedakan stale data dari UI bug atau permission error
Menentukan evidence frontend sebelum mengeskalasi cache issue

RedisCachingSessionsQueuesDebugging

Isi lesson

6 blok

1.
Cache mempercepat akses, tetapi membawa pertanyaan freshnessBelum selesaiWajib
2.
Klasifikasikan use case, bukan implementasinyaBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Cache bukan tempat sembarang data privateBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Cache mempercepat akses, tetapi membawa pertanyaan freshness

Wajib

Redis adalah data structure server yang sering dipakai untuk kebutuhan seperti cache, session-like state, rate limiting, atau pekerjaan queue-like. Pada level frontend, kamu tidak perlu mengelola Redis command atau cluster. Yang penting adalah mengenali pattern product: Course Catalog mungkin cepat karena daftar public disimpan sementara sebagai cache; status session mungkin dibantu service state; atau email setelah user submit form diproses asynchronous lewat queue-like workflow.

Cache bukan copy data yang selalu benar selamanya. Jika title course baru saja diubah tetapi list masih menunjukkan nilai lama, symptom dapat berasal dari cache, revalidation, API, optimistic UI, atau browser state. Kumpulkan kapan update dilakukan, endpoint/route yang dibaca, data yang diharapkan versus data yang diterima, account/environment, dan apakah refresh mengubah symptom. Jangan memutuskan untuk menonaktifkan cache dari frontend tanpa owner service.

Bagian ini memengaruhi progres lesson.

Klasifikasikan use case, bukan implementasinya

Wajib

const infrastructureUseCases = {
  catalogSnapshot: "cache",
  signedInSessionLookup: "session-store",
  sendCourseInvitation: "queue-like-work",
};

Catalog public dapat memakai cache untuk mengurangi read berulang. Session lookup dapat memakai store yang membantu auth flow, bergantung architecture. Invitation email tidak harus selesai sebelum UI menampilkan success; service dapat mencatat job lalu worker memprosesnya. Contoh ini tidak menyatakan setiap project harus memakai Redis untuk ketiganya.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Classify course infrastructure use cases

Klasifikasikan cache, session-like store, dan queue-like work tanpa membangun Redis runtime.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

3 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Setelah edit title course, UI masih menampilkan title lama. Tindakan frontend pertama yang paling bertanggung jawab adalah

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Cache bukan tempat sembarang data private

Jangan menyimpulkan response personal boleh dibagikan ke semua user karena feature menjadi cepat. Cache key, scope user/organization, invalidation, dan policy adalah contract backend. Frontend perlu memperlakukan data private sesuai auth boundary dan menampilkan state refresh atau retry yang jujur bila freshness belum pasti.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Redis dapat dipakai untuk cache, session-like state, atau pekerjaan queue-like tergantung architecture.
Cache membawa contract freshness: data dapat sementara stale dan perlu revalidation yang jelas.
Frontend mengumpulkan expected versus actual data, waktu, route, dan environment sebelum escalation.
Cache tidak menggantikan authorization atau membuat data private aman dibagikan.
Berikutnya, kita membaca file upload sebagai flow product dari file input sampai storage dan metadata.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Cache mempercepat akses, tetapi membawa pertanyaan freshness.

Memuat progres Review module