Routing di Backend & Frontend: Apa Bedanya?

 Routing di Backend & Frontend: Apa Bedanya?

Routing adalah konsep fundamental dalam pengembangan aplikasi web modern. Baik di backend maupun frontend, routing berperan penting dalam menentukan bagaimana aplikasi merespons permintaan pengguna. Namun, meskipun namanya sama, fungsi dan cara kerjanya memiliki perbedaan yang cukup signifikan.

Artikel ini akan membahas pengertian routing, perbedaan routing di backend dan frontend, serta contoh implementasinya agar mudah dipahami.

Apa Itu Routing?

Routing adalah proses menentukan ke mana sebuah request diarahkan berdasarkan URL atau path tertentu.

Contoh sederhana:

• Saat pengguna membuka https://website.com/login

• Sistem akan menentukan halaman atau logika apa yang harus dijalankan

Routing bertindak sebagai penjembatan antara URL dan aksi yang dilakukan aplikasi.

Routing di Backend

Pengertian

Routing di backend berfungsi untuk menangani request dari client (browser, mobile app, API consumer) dan menentukan logika server yang dijalankan.

Biasanya routing backend akan:

• Menerima HTTP request (GET, POST, PUT, DELETE)

• Memproses data

• Mengakses database

• Mengembalikan response (HTML, JSON, XML)

Contoh Routing Backend

Laravel (PHP)

Route::get('/users', [UserController::class, 'index']);

Artinya:

• Ketika user mengakses /users

• Backend menjalankan fungsi index() pada UserController

Express.js (Node.js)

app.get('/users', (req, res) => {

res.json({ message: 'Daftar user' });

});

Ciri Routing Backend

• Berjalan di server

• Fokus pada logika bisnis

• Mengelola database & autentikasi

• Menghasilkan data atau halaman

Routing di Frontend

Pengertian

Routing di frontend digunakan untuk mengatur navigasi antar halaman di sisi client tanpa melakukan reload halaman penuh.

Frontend routing umumnya digunakan pada Single Page Application (SPA) seperti:

• React

• Vue

• Angular

Contoh Routing Frontend

React Router

<Route path="/login" element={<Login />} />

Artinya:

• Saat URL berubah ke /login

• Komponen <Login /> akan ditampilkan

Vue Router

{ path: '/login', component: Login }

Ciri Routing Frontend

• Berjalan di browser (client-side)

• Tidak reload halaman

• Hanya mengganti tampilan UI

• Lebih cepat dan interaktif

Perbedaan Routing Backend & Frontend

Bagaimana Backend & Frontend Routing Bekerja Bersama?

Pada aplikasi modern:

1. Frontend routing menangani navigasi UI

2. Backend routing menangani data dan logika

Contoh alur:

• User membuka /dashboard

• Frontend router menampilkan halaman Dashboard

• Dashboard memanggil API /api/stats

• Backend router memproses dan mengirim data

Dengan pembagian ini:

• Frontend fokus pada tampilan & UX

• Backend fokus pada data & keamanan

Kapan Harus Menggunakan Keduanya?

✔ Gunakan Backend Routing saja jika:

• Website statis atau server-side rendering

• Aplikasi sederhana

✔ Gunakan Backend + Frontend Routing jika:

• Aplikasi SPA

• Dashboard admin

• Aplikasi web modern & interaktif

Routing di backend dan frontend memiliki peran yang berbeda namun saling melengkapi:

• Backend routing mengatur logika dan data

• Frontend routing mengatur navigasi dan tampilan

Memahami perbedaan ini akan membantu kamu membangun aplikasi web yang lebih terstruktur, cepat, dan scalable.