Mengenal App Router Next.js: Kenapa Web Bisa Lebih Ngebut dan Aman?

Kalau kamu baru aja ngikutin Panduan Utama Inisialisasi Next.js dan Prisma (Part 1), sadar nggak sih pas proses instalasi kemarin, kita lebih milih pakai opsi App Router ketimbang Pages Router versi lama?

Nah, semenjak Next.js versi 13 rilis, Vercel (tim pembuat Next.js) ngerombak abis-abisan strukturnya. Pindah dari folder pages/ ke app/ ini bukan cuma sekadar ganti nama folder doang, lho. Ini beneran lompatan gede buat urusan performa (makin ngebut) dan tentunya keamanan (Web Security).

Di artikel nyantai kali ini, kita bakal bedah bareng-bareng kenapa App Router ini jauh lebih jagoan, dan kenapa struktur ini jadi standar wajib buat bikin aplikasi web sekelas Enterprise atau portal edukasi (LMS) yang lagi kita bangun.

1. React Server Components (RSC) Bawaan Pabrik

Dulu, kalau kita bikin web pakai arsitektur React biasa, beban berat buat nampilin halaman itu diserahin ke browser pengunjung (namanya Client-Side Rendering). Kasihan kan kalau ada pengunjung yang pakai HP atau laptop spesifikasi pas-pasan? Web kita bakal kerasa lemot.

Di App Router, hampir semua komponen dari sananya udah jalan sebagai Server Components. Maksudnya, semua proses berat dieksekusi di server kita yang bertenaga ekstra. Terus, browser pengunjung cuma nerima hasil HTML bersih yang super ringan.

Bonus Keamanannya: Berhubung kodenya jalan di server, kita bisa nulis kode buat narik data penting dari database (pakai Prisma) langsung di dalam komponen halamannya. Nggak perlu takut password database-mu bocor atau diintip hacker lewat Inspect Element. Aman banget!

2. Fitur "Colocation": Biar File Penting Nggak Gampang Bocor

Gini ceritanya. Di Pages Router zaman dulu, ada satu celah konyol tapi bahaya banget: semua file yang kamu taruh di dalam folder pages/ bakal otomatis jadi halaman web yang bisa diakses publik.

Sering banget developer pemula kelupaan naruh file rahasia kayak koneksi-db.ts atau komponen-admin.tsx di situ. Ujung-ujungnya? Jeroan kodenya bisa diakses orang lain. Nah, App Router beresin mimpi buruk ini pakai konsep Colocation.

// Struktur App Router (Jauh Lebih Aman)
app/
 ├── dashboard/
 │    ├── page.tsx       <-- HANYA file ini yang bisa diakses publik (Route)
 │    ├── chart.tsx      <-- File ini AMAN (Tidak punya URL sendiri)
 │    ├── db-helper.ts   <-- File ini AMAN (Tidak bisa diakses langsung)
 └── layout.tsx

Di sistem baru ini, sebuah folder baru bisa diakses jadi halaman web cuma kalau di dalamnya ada file bernama page.tsx atau route.ts. Jadi, kamu bebas nyimpen file konfigurasi, API, atau komponen lain di folder yang sama tanpa takut ketahuan publik. Jauh lebih tenang, kan?

3. Pindah Halaman Tanpa Loading Ulang (Nested Layouts)

Pas bikin web yang lumayan ribet kayak portal sekolah, pasti ada bagian web yang tampil terus-terusan, misalnya Sidebar menu atau Navbar di bagian atas.

App Router ngenalin file bernama layout.tsx. File ini tugasnya ngebungkus page.tsx. Kerennya, pas pengunjung pindah halaman (misal dari halaman "Data Guru" ke "Data Siswa"), Next.js cuma bakal me-render ulang bagian tengah kontennya aja. Sidebar dan Navbar-nya tetep diam di tempat tanpa loading ulang (No Re-render). Efeknya? Web kamu bakal kerasa instan banget pas diklik!

Kesimpulan

Singkatnya, pindah ke App Router Next.js itu ibarat ganti mesin motor tua kamu dengan mesin motor balap. Kamu dapet kecepatan luar biasa berkat Server Components, dan di saat yang sama, sistem keamanannya nutup rapat celah kebocoran data (Information Disclosure) yang sering kejadian di versi lama.

Paham konsep fondasi ini tuh penting banget buat masa depan karir coding kamu. Buat ngelihat langsung gimana kita nerapin Server Components buat narik data dari database dengan aman, yuk balik lagi baca-baca di Jurnal Part 1 kita sebelumnya.

Share this post