Belajar TanStack - Production Deployment

#Pendahuluan

Kode yang benar, tervalidasi, dan ter-build bukan akhir perjalanan — aplikasi baru benar-benar hidup saat di-deploy. Episode 20 membahas production deployment untuk aplikasi TanStack Query dan Router: strategi deploy, opsi hosting untuk SPA dan aplikasi server-rendered, pengelolaan environment variables dan runtime config, serta optimasi build untuk production.

Sebagian besar aplikasi TanStack berbentuk SPA atau hybrid dengan server rendering. Kedua bentuk itu punya kebutuhan hosting yang berbeda, dan memahami perbedaannya mencegah masalah yang baru muncul setelah aplikasi online.

Di akhir episode, kalian tahu persis ke mana harus men-deploy aplikasi TanStack, bagaimana mengatur konfigurasi di berbagai environment, dan apa saja yang dioptimalkan saat build production.

#Strategi Deploy Aplikasi TanStack Query dan Router

#SPA Sederhana dengan Static Hosting

TanStack Query bekerja penuh di sisi client, sehingga hasil build Vite berbentuk file statis yang bisa di-host di CDN mana pun. Tantangan utama untuk SPA adalah fallback routing: setiap permintaan URL selain / harus mengarah kembali ke index.html agar TanStack Router bisa menangani navigasi.

npm run build
ls -la dist/

Perintah npm run build menghasilkan folder dist/ yang berisi index.html dan asset statis. Folder inilah yang diunggah ke hosting statis seperti Vercel, Netlify, atau Cloudflare Pages.

Prosesnya bisa diulang setiap kali ada perubahan: build ulang, unggah, dan cache CDN di-invalidasi otomatis karena nama asset memakai hash. Tanpa proses yang terekam, deployment menjadi aktivitas manual yang rawan kesalahan.

#Aplikasi Server-rendered

Jika kalian memakai Next.js atau Remix, build menghasilkan server runtime, bukan hanya file statis. Di Next.js, mode standalone memungkinkan menjalankan aplikasi di container tanpa instalasi lengkap. Hydration TanStack Query tetap terjadi di client setelah HTML dikirim.

node server.js

Perintah node server.js menjalankan server production dari output standalone. Beban rendering pindah ke server, sementara cache Query tetap di client untuk mengurangi request ulang.

#Opsi Hosting untuk SPA dan Server-rendered

#Platform PaaS untuk SPA

Vercel dan Netlify mendeteksi project Vite atau Next.js secara otomatis dan mengatur build command serta output directory sendiri. Framework preset mereka menangani fallback routing SPA tanpa konfigurasi tambahan.

#Container untuk Kontrol Penuh

Untuk tim yang membutuhkan kontrol penuh, aplikasi di-build menjadi container image dan di-deploy ke Kubernetes atau platform container. Pratinjau production tetap sama dengan local: file statis di-serve server HTTP apa pun, dengan aturan fallback ke index.html untuk semua route.

docker run -p 3000:3000 -e HOSTNAME=0.0.0.0 -e PORT=3000 \
  registry.example.com/aplikasi-tanstack:latest

Flag -e HOSTNAME=0.0.0.0 -e PORT=3000 memastikan server mendengar di semua interface dalam container. Variabel environment dimasukkan saat container dijalankan, bukan dikunci di dalam image.

#Mengelola Environment Variables dan Runtime Config

#Build-time vs Runtime Config

Variabel yang di-prefix NEXT_PUBLIC_ atau VITE_ dibakar ke dalam bundle saat build. Nilai itu tidak bisa diubah tanpa rebuild. Karena itu, konfigurasi yang berubah per environment sebaiknya dibaca di runtime melalui endpoint konfigurasi.

VITE_API_URL=https://api.example.com npm run build

VITE_API_URL=https://api.example.com npm run build mengikat URL API ke dalam bundle. Kalian harus menjalankan build terpisah untuk setiap environment jika memakai pendekatan build-time.

#Mengenal Runtime Config

Untuk aplikasi yang di-deploy ke banyak environment dari satu image, buat file config yang diambil saat runtime, misalnya endpoint /config.json. Hooks TanStack membacanya sebelum query pertama dijalankan, sehingga nilai URL API bisa diganti tanpa rebuild image.

Baca runtime config

const { data: config } = useQuery({
  queryKey: ["config"],
  queryFn: () => fetch("/config.json").then((r) => r.json()),
  staleTime: Infinity,
})
 
const baseUrl = config?.apiUrl ?? "/api"

staleTime: Infinity mencegah config di-fetch ulang berulang kali, karena nilai itu jarang berubah. Fallback config?.apiUrl ?? "/api" menjaga aplikasi tetap berfungsi walau file config tidak tersedia.

#Optimasi Build untuk Production

#Memecah Bundle dan Menghapus Code yang Tidak Terpakai

Vite dan Rollup secara otomatis melakukan tree shaking dan code splitting untuk TanStack. Pastikan library diimpor dari entry point package, bukan dari path internal, agar minifier bisa membuang bagian yang tidak terpakai.

#Cache Asset dengan Hash Filename

Asset yang diberi hash content-hash otomatis di-cache browser tanpa masalah, karena nama file berubah saat isinya berubah. TanStack Router dengan plugin Vite menghasilkan chunk per route, sehingga halaman pertama hanya mengunduh kode yang benar-benar dibutuhkan.

#Mengukur Keberhasilan Deployment

Setelah aplikasi live, verifikasi bukan berhenti di halaman termuat. Pantau log server, Web Vitals, dan error rate selama beberapa hari pertama. Sinyal dari monitoring inilah yang membedakan deployment yang lancar dari deployment yang hanya beruntung.

#Penutup

Episode 20 menutup production deployment: strategi deploy SPA dan server-rendered, opsi hosting dari PaaS sampai container, pengelolaan environment variables build-time dan runtime config, serta optimasi bundle dan asset untuk production.

Inti yang harus dibawa pulang:

• Build SPA menghasilkan folder statis siap CDN dengan fallback routing.
• Next.js standalone memungkinkan server berjalan di container tanpa node_modules lengkap.
• Vercel dan Netlify menangani framework preset TanStack otomatis.
• Variabel build-time terkunci saat build, runtime config fleksibel per environment.
• Import dari entry point package menjaga tree shaking bekerja.
• Code splitting per route membuat halaman pertama lebih cepat.

Di episode 21 selanjutnya kita akan membahas observability dan monitoring — memonitor data fetching dan rendering di sisi client, melacak perilaku cache dan performa query, error reporting untuk UI dan data layer, serta analytics performa dan pengalaman pengguna. Aplikasi kalian sudah online, sekarang pastikan ia bisa diamati dan diperbaiki!