Membangun dasbor langsung dengan Astro server islands

Selama bertahun-tahun beranda saya benar-benar statis: apa pun yang benar saat build tetap begitu sampai deploy berikutnya. Saya ingin kolom kanan terasa hidup — apa yang sedang saya dengar, commit terbaru, cuaca di Sorong — tanpa mengirim bundel JavaScript yang berat ke setiap pembaca.

Masalah dengan fetch di sisi klien

Pendekatan naif adalah mengambil semuanya di browser. Tapi itu berarti membuka token API, kedipan widget kosong saat memuat, dan JavaScript yang diunduh setiap pengunjung entah mereka melihat sidebar atau tidak.

Server islands memungkinkan halaman yang sebagian besar statis menunda bagian dinamisnya ke server — dirender saat diminta, dialirkan saat siap.

Endpoint kecil

Setiap widget langsung mendapat endpoint kecil. Ini versi ringkas untuk Spotify:

// src/pages/api/spotify.ts
export const prerender = false;

export const GET = async () => {
  const token = await refreshToken();
  const res = await fetch('https://api.spotify.com/v1/me/player', {
    headers: { Authorization: `Bearer ${token}` },
  });
  return Response.json(await res.json());
};

Halaman tetap statis dan seketika; hanya /api/spotify yang berjalan saat diminta. Dapat keduanya sekaligus.