Panduan Lengkap Menghindari Output Statik di SvelteKit: Mengaktifkan SSR Secara Penuh

Thu, May 2025 00:32:28

SvelteKit, framework modern yang dibangun di atas Svelte, secara default dirancang untuk menghasilkan situs statis. Hal ini membuatnya sangat efisien untuk kecepatan muat halaman dan penyebaran (deployment) yang murah di CDN. Namun, dalam banyak kasus pengembangan aplikasi web dinamis seperti dashboard, sistem autentikasi, atau aplikasi yang terintegrasi dengan database secara real-time, pendekatan statik saja tidak cukup.

Artikel ini akan membahas secara lengkap bagaimana cara agar SvelteKit tidak menghasilkan aplikasi statis, melainkan menjadi server-side rendered (SSR) secara penuh. Dengan kata lain, aplikasi dapat menangani permintaan secara dinamis dari server setiap kali pengguna mengakses halaman.

1. Memahami Perbedaan Static dan SSR di SvelteKit

Sebelum membahas lebih jauh, penting untuk memahami perbedaan antara aplikasi statik dan SSR:

• Static Site Generation (SSG): Semua halaman dirender saat proses build dan hasilnya disimpan sebagai HTML/CSS/JS yang siap disajikan oleh server statis (seperti CDN).
• Server Side Rendering (SSR): Halaman dirender secara dinamis di server setiap kali ada permintaan dari pengguna.

SvelteKit memungkinkan kamu memilih antara dua pendekatan tersebut, atau bahkan mengkombinasikannya pada tingkat halaman.

Secara default, SvelteKit menggunakan adapter-static, yang berarti hasil build akan menjadi situs statis. Untuk mengubah perilaku ini, kamu perlu mengganti adapter.

2. Mengganti Adapter Static ke Adapter SSR

SvelteKit memiliki banyak adapter yang disesuaikan dengan platform penyebaran, seperti adapter-node, adapter-vercel, adapter-netlify, dan lainnya.

a. Instalasi adapter-node

Untuk membuat aplikasi SvelteKit dapat dijalankan sebagai server Node.js biasa (SSR), kita gunakan @sveltejs/adapter-node.

npm install @sveltejs/adapter-node

b. Konfigurasi svelte.config.js

Setelah adapter terinstal, kita perlu mengubah konfigurasi default pada file svelte.config.js:

import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter(),
    // SSR aktif secara default
  }
};

Dengan perubahan ini, aplikasi akan dibangun sebagai aplikasi SSR yang siap dijalankan dengan node.

3. Memastikan SSR Aktif di Halaman

Meskipun SvelteKit mengaktifkan SSR secara default, kamu mungkin perlu memastikan bahwa kamu tidak menonaktifkannya secara eksplisit di tingkat halaman atau layout.

Jika di dalam file +page.js atau +layout.js kamu pernah menuliskan:

export const ssr = false;

Itu berarti halaman tersebut hanya akan dirender di sisi klien (SPA mode). Untuk mengaktifkan SSR kembali, ubah menjadi:

export const ssr = true;

Atau hapus baris tersebut sepenuhnya untuk kembali ke default SSR.

4. Menjalankan Aplikasi SSR

Setelah mengganti adapter, kamu bisa membangun dan menjalankan aplikasi sebagai berikut:

npm run build
node build

Selama pengembangan, kamu masih bisa menggunakan:

npm run dev

SvelteKit secara otomatis akan menjalankan server pengembangan yang mendukung SSR.

5. Menggunakan +page.server.js dan +layout.server.js

Salah satu keuntungan menggunakan SSR adalah kamu bisa menggunakan file +page.server.js atau +layout.server.js untuk memuat data langsung dari server.

Contoh penggunaan:

// +page.server.js

export async function load({ fetch, params }) {
  const res = await fetch('/api/data');
  const data = await res.json();

  return {
    data
  };
}

Dengan ini, data akan dimuat dari server setiap kali pengguna mengakses halaman, bukan saat build.

6. Platform Hosting untuk SSR

Jika kamu sudah mengaktifkan SSR, kamu perlu menyebarkan aplikasi di platform yang mendukung SSR.

Beberapa opsi hosting yang cocok untuk SSR antara lain:

• Node.js VPS atau Server Pribadi: Jalankan aplikasi seperti Node.js biasa.
• Vercel: Gunakan @sveltejs/adapter-vercel.
• Netlify: Gunakan @sveltejs/adapter-netlify.
• Render.com: Mendukung SSR secara penuh.
• Cloudflare Workers: Gunakan adapter-cloudflare untuk SSR edge.

7. Perbandingan Adapter

Pilih adapter yang sesuai dengan kebutuhan proyek dan infrastruktur hosting kamu.

8. Contoh Nyata: Autentikasi dan Dashboard Dinamis

Misalnya kamu membuat aplikasi dashboard yang hanya bisa diakses jika pengguna sudah login. Ini tidak bisa dilakukan hanya dengan situs statis, karena perlu pengecekan session setiap saat.

Dengan SSR, kamu bisa memanfaatkan load() di +layout.server.js untuk memverifikasi login:

// +layout.server.js

export async function load({ cookies }) {
  const token = cookies.get('session');

  if (!token) {
    return {
      redirect: '/login'
    };
  }

  // Verifikasi token, ambil data pengguna, dll.
  const user = await getUserFromToken(token);

  return {
    user
  };
}

9. Keuntungan dan Kekurangan SSR

Keuntungan:

• Dinamis: bisa menyesuaikan halaman sesuai permintaan pengguna.
• Aman: tidak perlu menyimpan data rahasia di klien.
• SEO-friendly: cocok untuk aplikasi yang butuh diindeks mesin pencari.

Kekurangan:

• Beban server lebih tinggi.
• Sedikit lebih lambat dibanding SSG untuk halaman statik.

10. Kesimpulan

SvelteKit sangat fleksibel dan memungkinkan kamu memilih antara aplikasi statik, SSR, atau hybrid. Jika kamu sedang membangun aplikasi dinamis seperti sistem login, dashboard admin, atau e-commerce, mengganti adapter ke SSR seperti adapter-node adalah langkah penting.

Dengan mengaktifkan SSR, kamu bisa membuat aplikasi web modern yang responsif, aman, dan bisa menangani interaksi kompleks langsung dari sisi server.

Langkah-langkah yang telah dijelaskan di atas bisa menjadi fondasi kuat untuk mengembangkan aplikasi berbasis SvelteKit yang dinamis. Selamat mencoba dan eksplorasi lebih dalam!

Jika kamu butuh bantuan untuk deploy di platform tertentu seperti Vercel, VPS, atau Netlify, tinggalkan komentar atau tanyakan langsung. Kami siap membantu!