Case study · 2026
STEKOM University Web Platform (Astro.js)
Membangun arsitektur portal web multi-site berkinerja tinggi menggunakan Astro SSR, Tailwind CSS, dan Redis.
- Client
- Universitas STEKOM
- Role
- Frontend
- Timeline
- 2026
- Category
- Web Portal
stekom.ac.id: Portal Web Terintegrasi Universitas STEKOM Berbasis Astro SSR
Overview
stekom.ac.id adalah portal web resmi Universitas Sains dan Teknologi Komputer (Universitas STEKOM). Platform terpadu ini menjadi pintu utama informasi kampus, mulai dari berita, artikel, agenda akademik, galeri, jurnal, dokumen mutu (LPM), hingga layanan mahasiswa seperti cek tagihan dan verifikasi alumni. Untuk menangani kebutuhan portal akademik yang kompleks, pembaruan konten yang masif, dan lonjakan trafik saat penerimaan mahasiswa baru (PMB), platform ini dibangun ulang menggunakan Astro dengan mode Server-Side Rendering (SSR). Hasilnya, data dapat disajikan secara real-time tanpa mengorbankan kecepatan akses dan metrik SEO.
Tantangan Bisnis
Sebelum arsitektur baru ini diterapkan, pengelolaan website kampus menghadapi beberapa kendala krusial:
- Beban Konten Dinamis & Trafik Tinggi: Berita dan pengumuman akademik diperbarui setiap hari. Situs dinamis konvensional seringkali membebani server dan menjadi lambat saat diakses oleh ribuan calon mahasiswa secara bersamaan pada masa pendaftaran.
- Manajemen Multi-Situs yang Rumit: Universitas memiliki banyak unit dan program studi yang masing-masing membutuhkan situs sendiri. Mengelola codebase terpisah memperlambat pengembangan dan membuat standar keamanan serta desain tidak seragam.
- Keamanan Data Sensitif Akademik: Layanan mandiri seperti cek tagihan dan verifikasi alumni harus terhubung ke Sistem Informasi Akademik (SIAKAD). Kredensial API dan data mahasiswa sangat rawan jika terekspos di sisi peramban (browser).
- Persaingan Visibilitas Mesin Pencari: Waktu muat (load time) yang lambat dan struktur halaman yang kurang optimal berdampak langsung pada peringkat SEO lokal, yang krusial untuk menjaring calon mahasiswa baru.
Solusi & Implementasi Fitur
Untuk menjawab tantangan tersebut, platform dirancang dengan arsitektur SSR yang aman, sangat cepat, dan dapat direplikasi untuk banyak unit:
- SSR & Dynamic Routing: Mengaktifkan Server-Side Rendering agar halaman konten (berita, agenda, dll.) dirender langsung dari data terbaru di server. Rute dinamis (
[slug]) memungkinkan konten tayang seketika tanpa proses build ulang. - Arsitektur Multi-Site via Satu Codebase: Satu aplikasi melayani banyak domain (universitas dan prodi). Konfigurasi situs (sumber API, cache, analitik) menyesuaikan otomatis berdasarkan Host header, sehingga unit baru bisa ditambahkan tanpa perlu menyalin kode (copy-paste codebase).
- Island Architecture & Caching Redis: Astro mengirim halaman HTML dengan zero JavaScript secara default. Komponen interaktif (seperti peta kerja sama Leaflet/MapLibre) hanya dimuat saat dibutuhkan. Respons API dikelola melalui sistem cache Redis, menurunkan beban server pusat secara drastis.
- API Terpusat & Keamanan Berlapis (Middleware): Seluruh komunikasi dengan SIAKAD dilakukan murni di sisi server. Permintaan difilter melalui serangkaian middleware (CSP, rate limiting berbasis IP & Cloudflare, deteksi bot, dan sanitasi input) untuk mencegah eksploitasi data sensitif.
Dampak Bisnis (Outcome)
Arsitektur portal yang baru ini membawa perubahan nyata bagi operasional digital dan branding kampus:
- Stabilitas Optimal Saat Trafik Memuncak: Kombinasi SSR, caching Redis, dan pendekatan halaman ringan membuat situs tetap responsif saat diserbu akses massal pada periode pendaftaran mahasiswa baru.
- Efisiensi Pemeliharaan & Pengembangan: Pendekatan multi-site memungkinkan seluruh prodi dan unit kampus berbagi komponen dan standar keamanan yang sama. Biaya pemeliharaan turun drastis dan peluncuran website unit baru menjadi sangat cepat.
- Perlindungan Data Akademik yang Solid: Kredensial dan token API tersimpan aman di server. Risiko kebocoran data mahasiswa atau penyalahgunaan endpoint berhasil ditekan berkat arsitektur keamanan berlapis.
- Peningkatan Visibilitas (SEO) Pencarian Lokal: Halaman yang dirender dengan cepat, URL yang bersih (termasuk redirect 301 dari URL lama), dan struktur HTML yang ramah mesin pencari secara signifikan memperkuat posisi Universitas STEKOM di hasil pencarian.
Tech Stack & Arsitektur
- Frontend Framework: Astro 6 (SSR Mode, Island Architecture)
- Styling & UI: Tailwind CSS v4
- Deployment & Server: Node.js (adapter
@astrojs/node+ Express), Docker, di belakang Cloudflare - Caching: Redis (ioredis) dengan fallback in-memory
- Peta Interaktif: Leaflet, MapLibre GL & Marker Cluster
- Database & Backend: REST API kampus dan integrasi SIAKAD
Screens
05Got a similar idea?
Let's build your website or web app, from database to deployment.




