Bit Group Asia

3. Struktur Direktori: Versi Vite (React Router)

Vite mengandalkan Programmatic Routing yang dikelola di folder routes/ untuk fleksibilitas CSR maksimal.

A. Struktur Modular Saat Ini

Struktur standar terbaru yang meniadakan folder features/, mengelompokkan tampilan halaman di pages/, dan memusatkan seluruh fungsionalitas shared di folder-folder utilitas root.

my-project/
├── components/                 # UI COMPONENTS (Atomic Design)
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
│   └── templates/
├── pages/                      # VIEW LAYER (Halaman per rute)
├── routes/                     # PUSAT ROUTING
│   ├── index.tsx               # Main Router
│   └── PrivateRoute.tsx        # Client-Side Auth Guard
├── hooks/                      # SHARED CUSTOM HOOKS
├── services/                   # GLOBAL API SERVICES
├── store/                      # GLOBAL STATE
├── utils/                      # UTILITIES (Helpers, formatters)
├── constants/                  # APP-WIDE CONSTANTS
├── types/                      # GLOBAL TYPES
├── App.tsx                     # Root Component
├── main.tsx                    # Entry Point
├── index.html
├── vite.config.ts              # DEV PROXY & Vite Config ✅
└── tsconfig.json

B. Struktur Feature-Based Architecture

Struktur lama yang memisahkan fungsionalitas berdasarkan entitas fitur bisnis ke dalam folder features/.

my-project/
├── components/                 # GLOBAL UI COMPONENTS
│   ├── ui/                     # Atoms
│   ├── shared/                 # Molecules
│   ├── organisms/
│   └── templates/
├── features/                   # BUSINESS MODULES (Feature-based)
│   ├── [feature-name]/
│   │   ├── components/         # Feature-specific UI
│   │   ├── hooks/              # Feature-specific logic
│   │   └── api/                # Feature-specific services
├── pages/                      # VIEW LAYER
├── routes/                     # PUSAT ROUTING
│   ├── index.tsx               # Main Router
│   └── PrivateRoute.tsx        # Client-Side Auth Guard
├── hooks/                      # SHARED CUSTOM HOOKS
├── services/                   # GLOBAL API SERVICES
├── store/                      # GLOBAL STATE
├── types/                      # GLOBAL TYPES
├── App.tsx                     # Root Component
├── main.tsx                    # Entry Point
├── index.html
├── vite.config.ts              # DEV PROXY & Vite Config ✅
└── tsconfig.json

C. Relevansi dan Penerapan di Vite (React Router)

Meskipun Vite + React Router menggunakan Client-Side Rendering (CSR) dan tidak memiliki sistem routing berbasis file bawaan seperti Next.js (App Router), prinsip-prinsip arsitektural dasar di atas tetap sepenuhnya relevan dan wajib diterapkan. Struktur folder Modular (Layer-First) maupun Feature-Based (Domain-First) memiliki signifikansi yang sama dalam menjaga skalabilitas kode.

Kesamaan Arsitektural (Framework-Agnostic Principles)

  1. Separation of Concerns (SoC): Pemisahan tegas antara UI layer (components/), view/routing layer (pages/ & routes/), data fetcher (services/), dan business logic (hooks/ atau store/) berlaku mutlak di Vite untuk menghindari kode spaghetti.
  2. Reusabilitas Kode: Penggunaan metodologi Atomic Design di folder components/ bekerja secara identik baik di Next.js maupun Vite untuk memastikan konsistensi antarmuka pengguna.
  3. Penyederhanaan Build & Dev Server: Struktur yang terorganisir dengan baik membantu bundler Vite mengoptimalkan proses code-splitting secara otomatis saat melakukan kompilasi produksi.

Perbedaan Utama Penerapan di Vite vs Next.js

Fitur / ParameterNext.js (App Router)Vite (React Router SPA)
Sistem RoutingFile-based Routing: Ditentukan oleh struktur direktori di dalam folder app/. File page.tsx menjadi entri point URL secara otomatis.Programmatic Routing: Dikelola secara terpusat di folder routes/ (misalnya menggunakan react-router-dom). Halaman didefinisikan di folder pages/ dan didaftarkan secara manual ke router.
Lokasi Logic & ComponentsColocation Terbatas: File non-route disarankan diletakkan di luar folder app/ agar aman dari pembacaan router.Kebebasan Penuh: Tidak ada batasan teknis dari framework untuk meletakkan file di dalam folder mana pun. Oleh karena itu, disiplin tim sangat krusial.
Auth Guard & Proteksi RuteMenggunakan proxy.js di level network proxy dan Middleware Next.js untuk intersepsi request server-side.Menggunakan komponen pembungkus Client-Side (seperti <PrivateRoute>) untuk memproteksi komponen halaman sebelum dirender.

Analisis Perbandingan di Vite: Modular vs Feature-Based

Sama seperti Next.js, Anda harus memilih struktur berdasarkan skala proyek Anda:

  • Pilihan A: Struktur Modular (Layer-First)
    • Kapan Digunakan: Sangat direkomendasikan untuk proyek SPA skala kecil hingga menengah (misalnya dashboard internal tunggal, micro-utility, landing page dengan interaksi kompleks).
    • Mengapa: Mengurangi overhead pembuatan file (boilerplate) dan mempercepat pengembangan awal karena tim dapat dengan cepat menemukan utilitas global, hooks, dan komponen yang dikelompokkan secara terpusat.
  • Pilihan B: Struktur Feature-Based (Domain-First)
    • Kapan Digunakan: Wajib untuk aplikasi portal enterprise skala besar yang memiliki banyak modul bisnis independen (misalnya platform e-commerce terintegrasi, core banking frontend).
    • Mengapa: Mengurangi risiko kepemilikan file yang kabur (shared ownership). Setiap tim fitur dapat mengelola komponen, hooks, dan API instance milik mereka sendiri di bawah satu folder domain (misalnya features/checkout/), menghindari konflik merge git, serta mempermudah migrasi masa depan ke sistem Monorepo.

Referensi Industri Terkait Arsitektur React:

© 2026 Bit Group Asia. All rights reserved.

ArchitectureSecurityGuidelines