Single Page Application (SPA) + REST API Node.js + MySQL Penjelasan Lengkap

Single Page Application (SPA) + REST API Node.js + MySQL Penjelasan Lengkap

Update 05/12/25 · Read 5 min

Single Page Application | SPA adalah arsitektur web modern di mana halaman tidak melakukan reload penuh setiap kali berpindah halaman.

Sebaliknya, hanya bagian tertentu (view) yang berganti secara dinamis.

Pada aplikasi tradisional, saat user klik menu:

  • Browser meminta halaman baru (HTML baru)
  • Server merespon HTML
  • Browser menampilkan halaman baru

Dalam SPA:

  • Browser hanya memuat file index.html satu kali
  • Pergantian layar dilakukan via JavaScript
  • Data didapat melalui API (JSON)

Alur SPA

  1. HTML layout utama berisi container <div id="view"></div>
  2. Saat pengguna navigasi (URL hash berubah)
  3. Router SPA mengambil konten file HTML parsial
  4. Ditampilkan di <div id="view">
  5. Tanpa reload page penuh

Kelebihan SPA

  • Navigasi super cepat
  • UX seperti aplikasi desktop/mobile
  • Bandwidth kecil (tidak muat seluruh halaman)
  • Cocok untuk dashboard, POS, ERP, e-commerce admin, CMS, APP Web custome, dll.

Kekurangan SPA:

Lebih kompleks dibanding website biasa, Perlu routing manual, SEO sulit (karena konten tidak di-render server-side) namun jika di develop secara benar masalah2 bisa hilang optimasi SEO pun OK!

Arsitektur SPA + REST API

SPA hanya bertugas meng-handle UI.
REST API menangani data & logic.

Frontend SPA:
  HTML, CSS, JS, jQuery/Vanilla
    └── Fetch/Ajax → API
          ↓
Backend:
  Node.js + Express + MySQL
    └── JSON Response

Data Flow SPA

UI Event → AJAX → API → DB Query → JSON Response → Render View

Struktur Folder SPA

Folder projects frontend dengan struktur engine template routers js sederhana tp dengan konsep full SPA { single page appllications }.

public/
    index.html
    app.js
    /views
        home.html
        auth/
           login.html
           register.html
        users/
           dashboard.html

SPA melihat folder views sebagai “template mini”.

Router SPA + Jquery

Router memonitor perubahan URL hash dan memuat konten.

index.html

<div id="view"></div>
<script src="app.js"></script>

Routing script

function loadPage(hash){
let url = `views/${hash}.html?v=${Date.now()}`;

$.get(url, function(html){
$("#view").html(html); // render view
})
.fail(function(){
$("#view").html("<h2>404 - Halaman Tidak Ada</h2>");
});
}

function router(){
let hash = location.hash.replace("#","") || "home";
loadPage(hash);
}

// listener hashchange
$(window).on("hashchange", router);

// initial call
router();

Keuntungan Router ini:

  • Tanpa reload
  • Kode sangat singkat
  • Cocok untuk dashboard SPA

AJAX Komunikasi Backend API Node Js

Contoh login SPA:

$(document).on("click", "#btnLogin", function(e){
  e.preventDefault();

  let email = $("#email").val();
  let pass  = $("#password").val();

  $.ajax({
    url: "http://localhost:3000/api/login",
    method: "POST",
    contentType: "application/json",
    data: JSON.stringify({email, pass}),
    success: function(res){
      if(res.status){
        localStorage.setItem("user", JSON.stringify(res.user));
        window.location.hash = "users/dashboard";
      } else {
        alert(res.message);
      }
    }
  });
});

Node.js REST API (Express)

Install dependencies

npm init -y
npm install express cors mysql2

Struktur Folder Backend

pemilihan teknologi software server node js menjadi dapur pacu performa tinggi menggunakan framework express js + database mysql server versi 8.++
server/
server.js
db.js
/routes
auth.js
users.js

Database MySQL

CREATE DATABASE spa_db;

CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(80),
email VARCHAR(100) UNIQUE,
password VARCHAR(100)
);

Koneksi Database (db.js)

Penggunaan sistem pool supaya bisa maksimal nampung koneksi simultan dan traffic tinggi:

const mysql = require("mysql2");

const db = mysql.createPool({
host: "localhost",
user: "root",
password: "",
database: "spa_db",
waitForConnections: true,
connectionLimit: 500, // maksimal koneksi
queueLimit: 1000 // unlimited queue
});

db.getConnection((err, conn)=>{
if(err){
console.log("DB Pool Error:", err);
} else {
console.log("DB Pool Connected");
conn.release(); // lepaskan kembali ke pool
}
});

module.exports = db;

API Register (Auth)

routes/auth.js:

const express = require("express");
const router = express.Router();
const db = require("../db");

router.post("/register", (req,res)=>{
  const {name,email,password} = req.body;

  db.query("SELECT id FROM users WHERE email=?", [email], (err,rows)=>{
    if(rows.length) return res.json({status:0, message:"Email sudah terdaftar"});

    db.query("INSERT INTO users SET ?", {name,email,password}, ()=>{
      res.json({status:1, message:"Registrasi berhasil"});
    });
  });
});

module.exports = router;

API Login

router.post("/login", (req,res)=>{
  const {email,password} = req.body;

  db.query("SELECT * FROM users WHERE email=? AND password=?", [email,password],
    (err,rows)=>{

      if(!rows.length){
        return res.json({status:0, message:"User / Password salah"});
      }

      res.json({status:1, user: rows[0]});
    }
  );
});

Mulai Server

const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());
app.use(express.json());

app.use("/api", require("./routes/auth"));
app.use("/api", require("./routes/users")); // next future

app.listen(3000, ()=>console.log("API running 3000"));

Keamanan SPA

SPA harus:

  • Menyimpan token/user dalam localStorage
  • Menghindari memuat view rahasia sebelum login
  • Validasi login saat hash router berubah
function isLogged(){
  const u = localStorage.getItem("user");
  return u ? JSON.parse(u) : null;
}

if(hash.startsWith("users/")){
  if(!isLogged()){
    window.location.hash = "auth/login";
    return;
  }
}

Kelebihan Real SPA dibanding Website Tradisional

Fitur Traditional SPA
Reload page Selalu Tidak
Kecepatan Lambat Sangat cepat
UX Seperti web Seperti aplikasi
Data load Full HTML JSON saja
Server load Tinggi Ringan

Performance Optimization

SPA menghindari:

  • Reload CSS/JS
  • Reload gambar
  • Reload layout

Sehingga bandwidth hemat hingga 80%.

Real Use Case Dunia Nyata

  1. Dashboard Admin
  2. E-Commerce Management
  3. Sistem Kasir (POS)
  4. Monitoring IoT
  5. Inventory / Warehousing
  6. Sistem Pajak / Payroll

SPA cocok ketika:

  • User banyak berinteraksi
  • Halaman sering berpindah tanpa reload

18. Error & Debugging

Debug karena async, Gunakan callback dalam load:

$("#view").load(url, function(){
console.log("DOM loaded and ready");
});

Pengembangan Lebih Lanjut

Jika ingin lebih profesional:

  • JWT Authentication
  • BCrypt password hashing
  • Middleware
  • Upload file (Multer)
  • Multi-role (Admin/User)
  • Pagination
  • Export Excel

Kesimpulan

SPA + Node.js API adalah arsitektur modern yang:

  • Cepat
  • Ringan
  • Scalable
  • Mudah maintenance

SPA mengendalikan UI. Node.js API mengendalikan data.
Keduanya decoupled, sehingga bisa dikembangkan terpisah:

  • API dapat dipakai Mobile App / Flutter
  • SPA dapat di-host CDN (Cloudflare, Firebase)

Hasil SreenShot

Foto frontend: