Panduan Lengkap Sistem Routing Web Development, dari Konsep Dasar hingga Implementasi

Saat Anda mengetik alamat sebuah situs atau mengklik tautan, ada satu proses tak terlihat yang menentukan halaman mana yang akan tampil. Proses itu dikenal sebagai routing. Dalam sistem routing web development, setiap alamat URL dipetakan ke sebuah logika yang tahu apa yang harus dikerjakan, yaitu menampilkan halaman beranda, mengambil data pengguna, atau menyimpan formulir. Tanpa mekanisme ini, sebuah aplikasi web hanya akan menjadi kumpulan file yang tidak punya pintu masuk yang jelas.

Tutorial ini akan memandu Anda memahami sistem routing web development secara runtut. Kita mulai dari konsep dasar, lalu membahas jenis-jenisnya, kemudian mempraktikkannya dengan tiga pendekatan yang paling banyak dipakai saat ini: Express.js di sisi server, React Router di sisi klien, dan routing berbasis file pada Next.js. Di akhir, kita merangkum praktik terbaik dan kesalahan umum yang sering membuat pemula tersandung.

Mengapa Sistem Routing Web Development Itu Penting

Bayangkan sebuah gedung perkantoran besar. Pengunjung datang dengan tujuan berbeda-beda, dan resepsionis bertugas mengarahkan mereka ke lantai atau ruangan yang tepat. Dalam sebuah aplikasi, routing berperan sebagai resepsionis tersebut. Ia membaca permintaan yang masuk, mencocokkannya dengan daftar tujuan yang dikenal, lalu meneruskannya ke bagian yang sesuai.

Peran ini membuat sistem routing web development menjadi fondasi dari hampir semua aplikasi web. Struktur URL yang rapi memudahkan pengguna mengingat alamat halaman, membantu mesin pencari memahami hierarki konten, dan memudahkan tim pengembang menelusuri kode. Routing yang dirancang buruk, sebaliknya, menimbulkan tautan yang rusak, halaman yang sulit dirawat, bahkan celah keamanan. Karena itu, memahami routing sejak awal akan menghemat banyak waktu di tahap pengembangan berikutnya.

Konsep Dasar Sistem Routing Web Development

Sebelum menulis kode, kita perlu memahami bahan bakunya. Sebuah URL terdiri dari beberapa bagian. Pada alamat https://contoh.com/artikel/belajar-routing?halaman=2, bagian https:// adalah protokol, contoh.com adalah domain, /artikel/belajar-routing adalah path, dan ?halaman=2 adalah query string. Dalam sistem routing web development, path adalah bagian yang paling sering dicocokkan, sedangkan query string biasanya dipakai untuk menyaring atau mengatur tampilan data.

Selain URL, ada pula HTTP method. Permintaan GET umumnya dipakai untuk membaca data, POST untuk membuat data baru, PUT atau PATCH untuk memperbarui, dan DELETE untuk menghapus. Dua permintaan dengan path yang sama bisa diperlakukan sangat berbeda jika method-nya berbeda. Itulah sebabnya sebuah route sebenarnya adalah gabungan dari tiga hal: method, pola path, dan handler, yaitu fungsi yang dijalankan ketika permintaan cocok.

Pola path pun bisa bersifat statis maupun dinamis. Route statis seperti /tentang selalu merujuk ke satu halaman yang sama. Route dinamis seperti /artikel/:slug memuat parameter yang nilainya berubah-ubah, sehingga satu definisi route dapat melayani ratusan artikel. Parameter inilah yang menjadi kunci skalabilitas dalam sistem routing web development.

Jenis-Jenis Sistem Routing Web Development

Setelah konsep dasarnya jelas, kita bisa membedakan tiga pendekatan utama. Masing-masing punya karakter dan situasi pemakaian yang berbeda.

1. Routing sisi server terjadi ketika server menerima setiap permintaan URL dan memutuskan respons yang dikirim, entah berupa halaman HTML lengkap atau data JSON untuk sebuah API. Setiap perpindahan halaman berarti permintaan baru ke server. Pendekatan ini sederhana, ramah mesin pencari, dan dipakai oleh framework seperti Express.js, Laravel, dan Django.
2. Routing sisi klien dipakai pada Single Page Application. Browser memuat aplikasi sekali saja, kemudian JavaScript yang mengatur pergantian tampilan ketika URL berubah, tanpa memuat ulang seluruh halaman. Hasilnya, perpindahan terasa cepat dan mulus. Library seperti React Router dan Vue Router bekerja dengan cara ini, memanfaatkan History API milik browser untuk mengubah alamat tanpa permintaan baru ke server.
3. Routing berbasis file adalah pendekatan modern di mana struktur folder otomatis menjadi struktur URL. Next.js dan Nuxt menganut cara ini. Anda tidak perlu mendaftarkan route secara manual karena sebuah file di lokasi tertentu langsung menjadi halaman. Banyak framework jenis ini menggabungkan rendering di server dan di klien, sehingga sistem routing web development di dalamnya bersifat hibrida.

Memilih di antara ketiganya bergantung pada kebutuhan proyek. Jika Anda membangun API atau situs berbasis konten, routing sisi server sudah memadai. Jika Anda membangun dasbor interaktif, routing sisi klien lebih cocok. Jika Anda menginginkan keduanya dengan konfigurasi minimal, routing berbasis file layak dipertimbangkan.

Implementasi Sistem Routing Web Development di Sisi Server dengan Express.js

Mari kita mulai praktiknya dari sisi server. Pastikan Node.js sudah terpasang, lalu buat folder proyek dan jalankan npm init -y diikuti npm install express. Setelah itu buat file server.js dengan isi berikut.

const express = require('express');
const app = express();

app.use(express.json());

// Route statis
app.get('/', (req, res) => {
  res.send('Selamat datang di beranda');
});

// Route dinamis dengan parameter path dan query string
app.get('/artikel/:slug', (req, res) => {
  const { slug } = req.params;
  const halaman = req.query.halaman || 1;
  res.json({ slug, halaman });
});

// Route dengan method berbeda pada path yang berbeda
app.post('/artikel', (req, res) => {
  const { judul } = req.body;
  res.status(201).json({ pesan: 'Artikel dibuat', judul });
});

// Penanganan route yang tidak dikenal
app.use((req, res) => {
  res.status(404).send('Halaman tidak ditemukan');
});

app.listen(3000, () => {
  console.log('Server berjalan di http://localhost:3000');
});

Perhatikan urutan penulisannya. Express mengevaluasi route dari atas ke bawah dan berhenti pada route pertama yang cocok. Karena itu, penanganan 404 harus diletakkan paling akhir. Jika Anda menaruhnya di awal, semua permintaan akan langsung berakhir sebagai halaman tidak ditemukan.

Seiring aplikasi membesar, menaruh semua route dalam satu file akan merepotkan. Express menyediakan express.Router agar route bisa dikelompokkan per fitur. Pendekatan modular ini membuat sistem routing web development Anda tetap terbaca.

// routes/artikel.js
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => res.send('Daftar artikel'));
router.get('/:slug', (req, res) => res.send(`Artikel: ${req.params.slug}`));

module.exports = router;

// server.js
const artikelRouter = require('./routes/artikel');
app.use('/artikel', artikelRouter);

Dengan konfigurasi ini, semua route di dalam artikel.js otomatis diawali /artikel. Satu file mengurus satu domain fitur, dan Anda dapat menambahkan router lain, misalnya untuk pengguna atau komentar, tanpa menyentuh kode yang sudah berjalan.

Implementasi Sistem Routing Web Development di Sisi Klien dengan React Router

Berpindah ke sisi klien, kita akan memakai React Router. Pasang dengan perintah npm install react-router-dom. Contoh di bawah memakai API versi 6 yang masih banyak dipakai. Pada versi 7, paket ini dikonsolidasikan ke react-router, tetapi konsep route, link, dan parameter tetap sama.

import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

function Beranda() {
  return <h1>Beranda</h1>;
}

function Artikel() {
  const { slug } = useParams();
  return <h1>Membaca artikel: {slug}</h1>;
}

function TidakDitemukan() {
  return <h1>Halaman tidak ditemukan</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Beranda</Link>
        <Link to="/artikel/belajar-routing">Artikel</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Beranda />} />
        <Route path="/artikel/:slug" element={<Artikel />} />
        <Route path="*" element={<TidakDitemukan />} />
      </Routes>
    </BrowserRouter>
  );
}

Ada beberapa hal yang patut dicermati. Komponen Link menggantikan tag <a> biasa agar perpindahan tidak memicu muat ulang halaman. Hook useParams membaca nilai parameter dinamis dari URL, mirip dengan req.params di Express. Sementara itu, path * berfungsi sebagai penampung semua alamat yang tidak cocok dengan route lain, sehingga menjadi padanan halaman 404.

Ada satu jebakan yang sering dialami pemula pada routing sisi klien. Ketika pengguna membuka langsung alamat seperti /artikel/belajar-routing atau menekan tombol muat ulang, permintaan itu dikirim ke server, padahal server hanya punya satu file index.html. Hasilnya adalah error 404 dari server. Solusinya adalah mengatur server agar mengembalikan index.html untuk semua path yang bukan file statis. Pada Nginx, misalnya, Anda dapat memakai try_files $uri /index.html;. Dengan begitu, sistem routing web development di sisi klien dapat mengambil alih setelah halaman dimuat.

Sistem Routing Web Development Berbasis File pada Next.js

Pendekatan ketiga menghapus kebutuhan mendaftarkan route secara manual. Pada Next.js dengan App Router, folder di dalam direktori app menentukan struktur URL, dan file page.js di dalam folder itulah yang menjadi halamannya. Strukturnya kira-kira seperti berikut.

app/
├── page.js                  → /
├── tentang/
│   └── page.js              → /tentang
└── artikel/
    ├── page.js              → /artikel
    └── [slug]/
        └── page.js          → /artikel/belajar-routing

Folder yang dibungkus tanda kurung siku, seperti [slug], menandakan segmen dinamis. Isi page.js pada folder tersebut bisa dituliskan seperti ini.

export default async function HalamanArtikel({ params }) {
  const { slug } = await params;
  return <h1>Artikel: {slug}</h1>;
}

Pada Next.js versi 15 ke atas, params berupa Promise sehingga perlu di-await. Pada versi yang lebih lama, objek ini dapat dipakai langsung, jadi sesuaikan dengan versi yang Anda gunakan. Keunggulan utama pendekatan ini adalah keterbacaannya: cukup melihat susunan folder, Anda langsung tahu peta URL seluruh aplikasi. Untuk perpindahan antarhalaman, Next.js menyediakan komponen Link dari next/link yang bekerja serupa dengan React Router, lengkap dengan pemuatan awal halaman tujuan agar navigasi terasa cepat.

Praktik Terbaik dalam Merancang Sistem Routing Web Development

Setelah memahami cara kerja ketiga pendekatan tadi, saatnya membahas cara merancang route yang baik. Prinsip pertama adalah konsistensi. Gunakan huruf kecil, pisahkan kata dengan tanda hubung, dan hindari ekstensi file di URL. Alamat /artikel/belajar-routing jauh lebih mudah dibaca dan diingat daripada /Artikel.php?id=17.

Prinsip kedua adalah mencerminkan hierarki sumber daya. Untuk API, pola seperti GET /artikel, GET /artikel/:id, dan DELETE /artikel/:id memberi gambaran yang jelas tentang apa yang dilakukan tiap route. Gaya ini lazim disebut REST dan membantu tim berkomunikasi dengan bahasa yang sama.

Prinsip ketiga menyangkut keamanan. Pastikan route yang sensitif dilindungi oleh middleware atau guard yang memeriksa autentikasi dan otorisasi. Di sisi klien, perlu diingat bahwa menyembunyikan halaman lewat routing hanya mengatur tampilan. Pemeriksaan yang sebenarnya tetap harus dilakukan di server, karena kode klien dapat dibaca dan dimodifikasi siapa saja. Terakhir, selalu validasi parameter yang masuk, sebab nilai pada :slug atau :id berasal dari pengguna dan tidak boleh dipercaya begitu saja.

Prinsip keempat adalah menyiapkan penanganan kesalahan. Sediakan halaman 404 yang informatif dan, bila perlu, pengalihan 301 untuk URL lama yang sudah dipindahkan. Langkah ini menjaga pengalaman pengguna sekaligus mempertahankan nilai SEO dari tautan yang sudah beredar.

Kesalahan Umum pada Sistem Routing Web Development

Dari pengalaman banyak pengembang, ada beberapa kesalahan yang berulang. Yang pertama adalah urutan route yang salah. Di Express, route dinamis seperti /artikel/:slug yang ditaruh sebelum route statis seperti /artikel/terbaru akan menangkap kata “terbaru” sebagai nilai slug. Letakkan route yang lebih spesifik di atas route yang lebih umum.

Kesalahan kedua adalah melupakan fallback pada aplikasi sisi klien, sehingga muncul 404 saat halaman dimuat ulang, seperti yang telah dibahas sebelumnya. Kesalahan ketiga adalah memakai tag <a> biasa untuk navigasi internal pada aplikasi React, yang menyebabkan seluruh halaman dimuat ulang dan menghilangkan keunggulan routing sisi klien. Kesalahan keempat adalah membuat struktur URL yang terlalu dalam, misalnya lima atau enam tingkat, yang menyulitkan pengguna maupun perawatan kode.

Sistem routing web development pada dasarnya adalah soal memetakan permintaan ke tindakan yang tepat. Konsepnya sederhana, yaitu method, path, dan handler, tetapi penerapannya bervariasi tergantung arsitektur yang dipilih. Express.js menunjukkan bagaimana server mengelola route dan memecahnya menjadi router modular. React Router memperlihatkan bagaimana navigasi bisa terjadi di browser tanpa muat ulang. Next.js menawarkan jalan pintas lewat struktur folder yang langsung menjadi URL.

Langkah selanjutnya adalah mencoba sendiri. Bangun aplikasi kecil, misalnya blog sederhana dengan halaman beranda, daftar artikel, dan detail artikel, lalu terapkan praktik terbaik di atas. Dari latihan itulah pemahaman Anda tentang sistem routing web development akan benar-benar mengendap, dan Anda akan lebih percaya diri merancang struktur URL untuk proyek yang lebih besar.