status-code3xxredirectcacheMenengah3 mnt baca

Status 3xx: Redirect dan Cache

Cara kerja 301, 302, 304, dan kenapa redirect chain yang panjang bikin web lambat.

Papan "kami pindah" di depan toko

Kamu datang ke toko langganan, tapi di pintunya ada papan: "Kami pindah ke ruko sebelah, ikuti panah ini." Kamu pun diarahkan ke alamat baru. Itulah redirect: server tidak melayani request di alamat lama, tapi memberitahu alamat barunya lewat status code keluarga 3xx plus header Location.

Kenapa redirect harus ada

Alamat berubah adalah hal biasa: website ganti domain, halaman dipindah, atau HTTP di-upgrade ke HTTPS. Tanpa redirect, semua link lama di internet akan mati dan bookmark pengguna rusak. Redirect menjaga web tetap terhubung meski alamat berubah-ubah.

Contoh 1: 301, pindah permanen

http
GET /artikel-lama HTTP/1.1
Host: blog.contoh.id
http
HTTP/1.1 301 Moved Permanently
Location: https://blog.contoh.id/artikel-baru

301 berarti "selamanya pindah ke sana." Browser otomatis mengikuti ke URL baru, dan mesin pencari memindahkan ranking SEO ke alamat baru. Dipakai saat ganti domain atau migrasi HTTP ke HTTPS.

Contoh 2: 302 dan 307, pindah sementara

http
HTTP/1.1 302 Found
Location: https://blog.contoh.id/promo-oktober

302 berarti "untuk sekarang ke sana dulu." Browser mengikuti tapi tidak mengingat permanen. Varian modernnya 307 menjaga method asli tetap sama (POST tetap POST setelah redirect), sedangkan 302 kadang diubah browser menjadi GET. Untuk API, pilih 307 atau 308 (versi permanen dari 307) agar method tidak berubah diam-diam.

Perilaku penting: fetch() dan browser mengikuti redirect secara otomatis, tapi Postman menampilkannya agar kamu sadar sedang di-redirect.

Kesalahan umum

Salah: redirect berantai terlalu panjang. A redirect ke B, B ke C, C ke D. Browser menyerah setelah sekitar 20 lompatan ("too many redirects"). Yang benar: arahkan langsung ke tujuan akhir, maksimal 1-2 lompatan.

Salah: memakai 302 untuk perubahan permanen. SEO dan cache tidak dipindahkan. Yang benar: 301/308 untuk permanen, 302/307 untuk sementara.

Salah: redirect setelah login ke URL yang bisa dimanipulasi. ?next=https://jahat.id adalah celah open redirect. Yang benar: validasi tujuan redirect hanya ke domain sendiri.

Panduan memilih kode redirect

SituasiKodeAlasan
Pindah domain permanen301SEO dan bookmark ikut pindah
HTTP ke HTTPS301Permanen, aman
Halaman promo sementara302/307Akan kembali normal
API redirect tanpa ubah method307/308Method POST tetap POST

Kesalahan paling mahal adalah memakai 302 untuk migrasi permanen: mesin pencari tidak memindahkan ranking, dan kamu kehilangan traffic organik selama berbulan-bulan tanpa sadar. Saat ragu untuk API, pilih 307 (sementara) atau 308 (permanen).

Catatan teknis: Status 304 Not Modified juga keluarga 3xx tapi bukan redirect: artinya "konten tidak berubah, pakai cache-mu saja." Ini fondasi caching browser yang membuat web terasa cepat. Detail caching akan dibahas di level lanjut.

Tantangan

Intip redirect secara manual

Tulis kode fetch ke https://httpbin.org/redirect/2 dengan opsi redirect: "manual". Cetak:

  1. Status code yang diterima.
  2. Nilai header Location.

Lalu ulangi tanpa opsi manual dan bandingkan status akhirnya. Jelaskan dengan kata-katamu apa yang dilakukan browser secara default terhadap redirect.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

</head>
<body>
<h1>Halo JS</h1>
<p>Buka console preview untuk melihat output.</p>
<script src="index.js"></script>
</body>
</html>