Belajar Remix - Sejarah, Latar Belakang & Mengapa Membutuhkan Remix

#Pendahuluan

Di episode 0 kalian sudah menyiapkan environment. Sekarang saatnya memahami dari mana Remix berasal dan mengapa framework ini layak dipelajari. Setiap teknologi lahir dari masalah tertentu, dan Remix lahir dari frustrasi panjang terhadap cara membangun aplikasi web modern.

Remix diciptakan oleh Michael Jackson dan Ryan Florence — dua nama yang tidak asing di ekosistem React, karena mereka juga pencipta React Router, library routing paling banyak dipakai untuk React. Pengalaman membangun routing mengarahkan mereka pada pertanyaan besar: kenapa aplikasi web modern terasa lebih lambat dan lebih rapuh daripada web klasik yang sederhana?

Episode 1 ini menjadi fondasi mental kalian. Dengan memahami sejarah dan filosofi, seluruh konsep teknis di episode-episode berikutnya — loader, action, nested route, progressive enhancement — akan terasa logis, bukan sekadar fitur yang harus dihafal.

#Dari React Router ke Remix

#Kelahiran Remix

Remix pertama kali diumumkan sebagai private beta pada 2020. Saat itu, arsitektur yang diusung terasa melawan arus: sebagian besar pengembang beralih ke SPA murni, sementara Remix justru mengembalikan komputasi ke server. Beta tertutup ini berjalan hampir setahun, dan tim mengundang komunitas untuk mencoba pola loader, action, dan nested route sebelum open source.

#Open Source dan Akuisisi Shopify

Pada November 2021, Remix resmi menjadi open source dengan lisensi MIT. Setahun kemudian, tepatnya Oktober 2022, Remix diakuisisi oleh Shopify — raksasa e-commerce yang memakai React secara besar-besaran. Akuisisi ini mengamankan pendanaan pengembangan penuh waktu, dan posisi Remix semakin kuat sebagai framework full-stack React resmi untuk platform web besar.

#Remix v2 dan v3

Remix v2 dirilis pada November 2023 dengan sejumlah modernisasi: dukungan penuh Vite, konvensi route tanpa perlu menghafal aturan lama, dan remix.config.js yang mulai digantikan vite.config.ts. Lanjutnya, pada November 2024, Remix v3 dirilis dengan penyatuan bersejarah: Remix menyatu dengan React Router v7.

npm view remix versions --json
npm view create-remix time --json

Dengan penyatuan ini, npm view create-remix time --json menunjukkan tanggal rilis resmi scaffolder. Tim yang sama mengelola satu fondasi routing, sehingga inovasi apa pun di React Router langsung tersedia di Remix.

Rangkuman tonggak sejarah yang perlu kalian ingat:

• 2020: Remix diumumkan sebagai private beta.
• 2021: Remix open source dengan lisensi MIT.
• 2022: Remix diakuisisi Shopify.
• 2023: Remix v2 dirilis, dukungan penuh Vite.
• 2024: Remix v3 dirilis, menyatu dengan React Router v7.

#Filosofi Server-First

#Data Loading di Server

Filosofi inti Remix berbunyi: server yang memegang data. Alih-alih menulis REST API terpisah lalu memanggilnya dari client, Remix memakai fungsi loader yang berjalan di server dan mengirim data langsung ke komponen. Browser menerima HTML yang sudah berisi data, bukan halaman kosong yang menunggu fetch.

#Progressive Enhancement

Remix percaya aplikasi harus berfungsi bahkan tanpa JavaScript di sisi client. Karena navigasi memakai tag a dan formulir memakai tag form biasa, Remix memakai ulang perilaku native browser sebagai fondasi. JavaScript hanya menjadi peningkatan: navigasi halus, validasi cepat, dan optimistic UI. Pola ini disebut progressive enhancement.

#Masalah yang Diselesaikan

#Menyederhanakan Data Loading dan Fetch di Server

Di arsitektur SPA, satu halaman sering memerlukan beberapa state: loading, error, dan sukses, masing-masing dengan kode sendiri. Remix memindahkan tanggung jawab itu ke server. Satu fungsi loader berjalan saat halaman diminta, dan hasilnya tersedia sebelum komponen me-render. Remix menangani alur loading dan error di lapisan server, sehingga komponen fokus pada rendering.

Loader yang mengirim data ke komponen

import { useLoaderData } from "@remix-run/react";
 
export async function loader() {
  const data = { nama: "Belajar Remix", totalEpisode: 24 };
  return data;
}
 
export default function Beranda() {
  const data = useLoaderData();
  return <h1>Series {data.nama}</h1>;
}

Perhatikan bahwa loader mengembalikan objek biasa — sejak Remix v3 dengan single fetch, tidak wajib lagi membungkusnya dengan helper json. Kombinasi loader dan useLoaderData inilah yang menggantikan useEffect fetch di SPA.

#Nested Routing dan UX yang Lebih Baik

Remix memakai nested routing: URL tidak sekadar dipetakan ke satu halaman, tetapi ke hierarki layout. Bagian halaman yang tetap, seperti sidebar, hanya di-render sekali dan tidak perlu di-ulang saat navigasi. Konsekuensinya, hanya data dari bagian yang berubah yang di-load ulang. Ini menghasilkan navigasi yang terasa instan dan hemat bandwidth.

#Alternatif terhadap SPA Murni dan SSR Tradisional

Posisi Remix berada di tengah spektrum. SPA murni lemah di SEO, first load, dan aksesibilitas; framework server-rendered klasik lemah dalam interaktivitas dan state. Remix menggabungkan keduanya: HTML di-render di server, lalu di-hydrate menjadi aplikasi interaktif penuh. Kalian mendapatkan yang terbaik dari dua dunia tanpa menulis dua aplikasi.

#Memposisikan Remix di Lanskap Framework

Saat ini Remix bersaing di kategori yang sama dengan Next.js dan SvelteKit. Perbedaan utamanya adalah kesetiaan pada model web: Remix lebih sedikit mengintervensi request-response native dan sangat bergantung pada konvensi route yang eksplisit. Banyak developer memilih Remix ketika mereka menginginkan kontrol penuh atas HTTP, caching, dan streaming — topik yang akan dibahas mulai episode 8.

Perlu dicatat juga posisi Remix terhadap React Router. Karena keduanya kini dikelola tim yang sama, skill routing yang kalian pelajari di sini tetap berlaku jika kalian membangun aplikasi React tanpa framework penuh. Menguasai Remix berarti menguasai React Router juga, dua keahlian yang saling melengkapi di dunia kerja.

Sebagai penutup pembahasan ini: jangan terjebak pada perdebatan framework mana yang paling cepat. Perbedaan performa antar framework modern umumnya kecil dibanding pengaruh keputusan arsitektur kalian sendiri. Fokuslah memahami model mental Remix — di situlah nilai jangka panjangnya berada.

Untuk developer yang baru mulai, keputusan praktisnya sederhana: jika kalian sudah nyaman dengan React dan ingin memahami arsitektur web secara utuh, Remix adalah pilihan belajar yang sangat baik. Serangkaian keputusan desain yang diambil Remix akan mengajarkan kalian bagaimana web bekerja sesungguhnya.

#Penutup

Episode 1 memberi kalian konteks: Remix lahir dari pengalaman membangun React Router, resmi open source pada 2021, diakuisisi Shopify pada 2022, dan sejak v3 menyatu dengan React Router v7. Filosofinya server-first dan progressive enhancement menjawab kelemahan SPA murni maupun SSR tradisional.

Inti yang harus dibawa pulang:

• Remix dibuat oleh Michael Jackson dan Ryan Florence, pencipta React Router.
• Remix menjadi open source pada 2021 dan diakuisisi Shopify pada 2022.
• Remix v3 menyatu dengan React Router v7, satu tim mengelola satu fondasi routing.
• Filosofi server-first: loader berjalan di server, client menerima HTML yang sudah berisi data.
• Progressive enhancement: aplikasi berfungsi tanpa JavaScript dan meningkat saat JavaScript aktif.
• Nested routing membuat navigasi terasa instan dan hemat bandwidth.

Di episode 2 selanjutnya kita akan membahas konsep dasar dan arsitektur utama Remix — bagaimana routing berbasis filesystem bekerja, peran loader dan action sebagai data handler di server, alur server rendering versus client hydration, serta komponen-komponen utama dalam project Remix. Siapkan pola pikir server-first kalian, karena mulai sekarang kita masuk ke mesin Remix yang sesungguhnya.