Next.js App Router vs Pages Router: Memahami Perbedaan dan Kapan Menggunakannya

Halo para developer! 👋

Next.js, framework React kesayangan banyak developer, terus berkembang pesat. Salah satu perubahan paling signifikan dalam beberapa tahun terakhir adalah pengenalan App Router di Next.js 13. Ini bukan sekadar update minor, melainkan pergeseran paradigma yang mengubah cara kita membangun aplikasi Next.js secara fundamental.

Sebelumnya, kita semua akrab dengan Pages Router, pola routing berbasis file system yang sudah menjadi standar Next.js sejak lama. Namun, dengan hadirnya App Router yang membawa konsep React Server Components (RSC) dan nested layouts, banyak developer yang mulai bertanya-tanya: “Mana yang harus saya pakai? Apa bedanya? Kapan Pages Router, kapan App Router?”

Jika Anda merasa bingung, Anda tidak sendiri! Artikel ini hadir untuk membantu Anda membedah tuntas kedua pendekatan routing ini. Kita akan menyelami konsep dasar masing-masing, melihat kelebihan dan kekurangannya, serta yang terpenting, memberikan panduan praktis kapan sebaiknya Anda menggunakan App Router atau Pages Router untuk proyek Anda.

Mari kita mulai perjalanan memahami masa depan (dan masa lalu) Next.js! 🚀

1. Pages Router: Sang Veteran yang Teruji

📌 Pages Router adalah sistem routing “tradisional” di Next.js yang sudah kita kenal dan cintai sejak lama. Ia bekerja berdasarkan struktur file di dalam direktori pages/.

Konsep Dasar & Cara Kerja

Ketika Anda membuat file .js, .jsx, atau .tsx di dalam direktori pages/, Next.js secara otomatis akan membuat route yang sesuai.

• pages/index.js akan menjadi route untuk / (halaman utama).
• pages/about.js akan menjadi route untuk /about.
• pages/blog/[slug].js akan menjadi route dinamis seperti /blog/my-first-post atau /blog/another-article.

Contoh Struktur Direktori Pages Router:

my-nextjs-app/
├── pages/
│   ├── index.js
│   ├── about.js
│   ├── blog/
│   │   └── [slug].js
│   └── api/
│       └── hello.js
├── public/
├── styles/
└── ...

Data Fetching di Pages Router

Pages Router menyediakan beberapa fungsi khusus untuk data fetching yang berjalan di sisi server atau saat build time:

• getServerSideProps: Mengambil data pada setiap request. Ideal untuk data yang sering berubah.
• getStaticProps: Mengambil data saat build time. Ideal untuk konten statis atau jarang berubah.
• getStaticPaths: Digunakan bersama getStaticProps untuk route dinamis, menentukan path mana yang harus di-generate saat build time.

Untuk data fetching di sisi klien (browser), Anda akan menggunakan useEffect atau library data fetching seperti SWR/React Query.

Contoh getServerSideProps:

// pages/posts/[id].js
import React from "react";

function Post({ post }) {
  if (!post) return <div>Loading...</div>;
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default Post;

Kelebihan Pages Router

✅ Maturity & Komunitas: Sudah ada sejak lama, banyak tutorial, resources, dan komunitas yang besar. Ini membuat debugging dan pencarian solusi menjadi lebih mudah. ✅ Kurva Pembelajaran Lebih Landai: Konsepnya lebih mudah dipahami bagi pemula React dan Next.js. ✅ Fleksibilitas Rendering: Anda memiliki kontrol eksplisit untuk memilih antara SSR, SSG, atau ISR per halaman.

Kekurangan Pages Router

❌ Keterbatasan Layout Bersarang (Nested Layouts): Menerapkan layout yang kompleks dan bersarang bisa jadi tantangan. Biasanya butuh pattern seperti HOC (Higher-Order Component) atau _app.js yang bisa jadi rumit. ❌ Potensi “Prop Drilling”: Untuk berbagi state antar komponen yang jauh, seringkali harus melewati banyak prop. ❌ Client-Side JavaScript: Jika tidak dioptimalkan, setiap halaman bisa mengirimkan banyak JavaScript ke client, berpotensi memperlambat initial load.

2. App Router: Masa Depan Next.js

🎯 App Router diperkenalkan di Next.js 13 dan didesain untuk memanfaatkan arsitektur baru yang diusung oleh React, yaitu React Server Components (RSC). Ini adalah perubahan besar yang bertujuan untuk meningkatkan performa, fleksibilitas layout, dan pengalaman developer.

Konsep Dasar & Cara Kerja

App Router menggunakan direktori app/ dan beroperasi dengan paradigma yang berbeda. Di sini, route didefinisikan oleh folder, dan setiap folder bisa memiliki file page.js (untuk halaman utama), layout.js (untuk layout), loading.js (untuk status loading), error.js (untuk error boundary), dan template.js.

Contoh Struktur Direktori App Router:

my-nextjs-app/
├── app/
│   ├── layout.js       // Root layout
│   ├── page.js         // Home page
│   ├── dashboard/
│   │   ├── layout.js   // Dashboard-specific layout
│   │   ├── page.js     // Dashboard home
│   │   └── settings/
│   │       └── page.js // Dashboard settings page
│   ├── blog/
│   │   ├── [slug]/
│   │   │   └── page.js // Dynamic blog post page
│   │   └── layout.js   // Blog-specific layout
│   └── api/
│       └── hello/
│           └── route.js // API Route
├── public/
├── styles/
└── ...

React Server Components (RSC)

💡 Ini adalah inti dari App Router! RSC adalah komponen React yang di-render sepenuhnya di server, dan hasilnya (hanya HTML dan CSS) dikirim ke browser. Tidak ada JavaScript yang dikirim ke client untuk RSC.

• Secara default, semua komponen di direktori app/ adalah Server Components.
• Jika Anda butuh interaktivitas (menggunakan useState, useEffect, event handlers), Anda harus menandai komponen tersebut sebagai Client Component dengan menambahkan 'use client' di bagian atas file.

Kapan Menggunakan Server Components (Default) vs Client Components ('use client')?

• ✅ Server Components:
  • Mengambil data langsung dari database atau API.
  • Memproses data sensitif di server.
  • Menggunakan komponen tanpa interaktivitas.
  • Mengurangi ukuran JavaScript yang dikirim ke client.
• ❌ Client Components:
  • Membutuhkan interaksi pengguna (onClick, onChange).
  • Menggunakan Hooks seperti useState, useEffect, useContext.
  • Membutuhkan akses ke browser APIs (window, localStorage).
  • Menggunakan library React yang hanya berjalan di client (misal, beberapa charting library).

Data Fetching di App Router

Di App Router, data fetching sangat disederhanakan. Anda bisa menggunakan async/await langsung di dalam Server Components. Next.js juga meng-extend fungsi fetch bawaan browser dengan fitur memoization dan caching yang kuat.

Contoh Data Fetching di App Router (Server Component):

// app/blog/[slug]/page.js
import React from "react";

async function getPost(slug) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts?slug=${slug}`,
  );
  // Next.js secara otomatis akan meng-cache hasil fetch ini.
  // Anda bisa mengatur revalidate options jika diperlukan.
  if (!res.ok) {
    throw new Error("Failed to fetch post");
  }
  const posts = await res.json();
  return posts[0]; // Assuming slug returns a single post
}

export default async function BlogPostPage({ params }) {
  const post = await getPost(params.slug);

  if (!post) return <div>Post not found.</div>;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

Nested Layouts

Salah satu fitur paling powerful dari App Router adalah dukungan nested layouts yang sangat baik. Setiap folder bisa memiliki file layout.js sendiri, dan layout ini akan membungkus page.js atau layout anak di dalamnya. Ini memungkinkan Anda untuk menjaga UI tetap konsisten dan berbagi state antar route dengan lebih mudah.

Contoh Nested Layouts:

// app/layout.js (Root Layout)
import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>My Global Navbar</nav>
        {children}
        <footer>My Global Footer</footer>
      </body>
    </html>
  );
}

// app/dashboard/layout.js (Dashboard Layout)
export default function DashboardLayout({ children }) {
  return (
    <section>
      <aside>Dashboard Sidebar</aside>
      <main>{children}</main>
    </section>
  );
}

// app/dashboard/page.js (Dashboard Page)
export default function DashboardPage() {
  return <h1>Welcome to Dashboard!</h1>;
}
// Hasil akhir untuk /dashboard akan memiliki Root Layout + Dashboard Layout

Kelebihan App Router

✅ Performa Unggul: Dengan React Server Components, App Router secara signifikan mengurangi jumlah JavaScript yang harus diunduh dan diproses oleh browser, menghasilkan initial load yang lebih cepat dan Core Web Vitals yang lebih baik. ✅ Nested Layouts yang Fleksibel: Membangun struktur UI yang kompleks dan mempertahankan state antar navigasi menjadi jauh lebih mudah. ✅ Data Fetching Terintegrasi: Model data fetching yang lebih modern dan terintegrasi dengan async/await di Server Components. ✅ Keamanan Lebih Baik: Data sensitif bisa tetap di server dan tidak pernah terpapar ke client. ✅ SEO Optimal: Dengan lebih banyak rendering di server, konten Anda lebih mudah diindeks oleh mesin pencari.

Kekurangan App Router

❌ Kurva Pembelajaran Curam: Konsep Server Components, Client Components, dan interaksi keduanya memerlukan pemahaman baru. ❌ Ekosistem yang Masih Berkembang: Meskipun terus membaik, beberapa library mungkin belum sepenuhnya kompatibel atau membutuhkan adaptasi untuk bekerja dengan App Router. ❌ Debugging Lebih Kompleks: Memahami di mana kode berjalan (server atau client) bisa membuat proses debugging sedikit lebih menantang.

3. Perbandingan Langsung: Pages Router vs App Router

Mari kita rangkum perbedaan kunci antara keduanya dalam tabel perbandingan:

💡 Analogi: Bayangkan Pages Router seperti membangun rumah dengan bata dan semen. Setiap ruangan (halaman) dibangun secara terpisah, dan Anda punya kendali penuh atas bagaimana setiap bata (komponen) diletakkan. Layout global (fondasi rumah) ada, tapi membuat layout bersarang (misal, kamar mandi di dalam kamar tidur) butuh usaha ekstra.

App Router seperti menggunakan modul prefabrikasi modern. Setiap modul (folder) sudah punya fungsi dan layout-nya sendiri (layout.js, page.js). Anda bisa dengan mudah menyusun modul-modul ini secara bersarang, dan sistemnya sudah dioptimalkan untuk efisiensi (RSC). Awalnya mungkin butuh waktu untuk memahami cara kerjanya, tapi begitu terbiasa, proses pembangunan jadi lebih cepat dan terstruktur.

4. Kapan Menggunakan Pages Router dan Kapan App Router?

Memilih antara Pages Router dan App Router bukanlah keputusan hitam-putih. Keduanya memiliki tempatnya masing-masing tergantung pada konteks proyek Anda.

Gunakan Pages Router jika:

• ✅ Proyek Lama yang Sudah Berjalan: Jika Anda memiliki aplikasi Next.js yang sudah stabil dengan Pages Router, tidak ada kebutuhan mendesak untuk migrasi. Fokus pada pemeliharaan dan penambahan fitur. Migrasi bisa dilakukan secara bertahap di kemudian hari.
• ✅ Tim Baru dengan Next.js: Untuk tim atau developer yang baru memulai dengan Next.js dan React, Pages Router mungkin menawarkan kurva pembelajaran yang lebih landai untuk memahami dasar-dasar routing dan data fetching sebelum menyelam ke kompleksitas App Router.
• ✅ Proyek Sangat Kecil & Sederhana: Untuk aplikasi yang tidak membutuhkan nested layouts kompleks atau optimasi performa ekstrem, Pages Router mungkin sudah cukup.

Gunakan App Router jika:

• 🎯 Memulai Proyek Next.js Baru: Ini adalah rekomendasi resmi dari tim Next.js. App Router adalah masa depan framework ini, dan memulai dengan App Router akan memastikan proyek Anda future-proof.
• 🎯 Prioritas Utama adalah Performa & SEO: Jika aplikasi Anda sangat peduli dengan initial load time, Core Web Vitals, dan performa SEO, App Router dengan RSC-nya adalah pilihan terbaik.
• 🎯 Membutuhkan Nested Layouts yang Kompleks: Untuk aplikasi dengan dashboard, admin panel, atau struktur UI yang berlapis, App Router membuat pengelolaan layout menjadi jauh lebih mudah dan efisien.
• 🎯 Ingin Memanfaatkan React Server Components: Jika Anda tertarik dengan konsep RSC untuk mengurangi JavaScript di sisi klien, meningkatkan keamanan, dan menyederhanakan data fetching, App Router adalah jalannya.
• 🎯 Proyek Skala Besar dan Kompleks: Untuk aplikasi yang akan tumbuh besar, struktur yang ditawarkan App Router membantu menjaga keteraturan dan skalabilitas kode.

⚠️ Tips Migrasi: Next.js mendukung co-existence antara Pages Router dan App Router. Ini berarti Anda bisa memiliki direktori pages/ dan app/ dalam satu proyek. Ini sangat berguna jika Anda ingin memigrasikan aplikasi lama secara bertahap, halaman per halaman atau fitur per fitur, tanpa harus melakukan big bang rewrite.

Kesimpulan

Perkenalan App Router adalah langkah maju yang signifikan untuk Next.js, membawa kita lebih dekat ke visi React yang lebih performant dan efisien dengan Server Components. Pages Router, di sisi lain, adalah fondasi yang kokoh dan masih sangat relevan untuk banyak skenario.

Pilihan antara Pages Router dan App Router pada akhirnya tergantung pada kebutuhan spesifik proyek Anda, tingkat kenyamanan tim Anda dengan teknologi baru, dan prioritas performa serta arsitektur. Untuk proyek baru, App Router adalah pilihan yang sangat direkomendasikan karena membawa banyak keuntungan performa dan kemudahan pengembangan dalam jangka panjang. Namun, jangan ragu untuk menggunakan Pages Router jika itu lebih masuk akal untuk konteks Anda.

Yang terpenting, teruslah belajar dan bereksperimen. Web development adalah dunia yang dinamis, dan memahami alat-alat yang kita miliki adalah kunci untuk membangun aplikasi yang hebat!

Sampai jumpa di artikel berikutnya! 🚀

🔗 Baca Juga

• Redis Caching Patterns: Strategi Cerdas untuk Aplikasi Web Skalabel
• Mempercepat Website Anda: Panduan Praktis Web Performance Optimization
• CDN 101 — Arsitektur & Praktik Implementasinya
• Message Queues: Fondasi Sistem Asynchronous yang Robust dan Skalabel