Next.js Pada VPS Murah

Apakah teman-teman pernah ingin melakukan deploy Next.js pada VPS tapi takut resourcenya terlalu besar? Atau khawatir Nextjs membutuhkan Spesifikasi CPU dan RAM yang besar?

Untuk menjawab pertanyaan diatas, kita akan mengupas tuntas tentang bagaimana cara melakukan deployment Next.js pada VPS yang paling murah.

VPS yang Saya gunakan ini memiliki spesifikasi sebagai berikut:

Lokasi : Indonesia
OS: Ubuntu 24.04
CPU: 1 vCPU
RAM: 1 GB

Web Server: Nginx 1.27 (Sudah dioptimasi)
Nodejs: 22.14.0
Next.js: 15.2 (Experiment: useCache, OptimizedCss)
PM2
Blog: https://gosite.id/

Dari spesifikasi diatas, kecil banget kan 🤯! Lalu kata orang-orang yang menyebutkan bahwa Next.js itu butuh resource gede bagaimana? Selama ini Saya juga sering mendengar akan hal ini, tapi Saya sendiri belum pernah mengalaminya (selain pada level development). Mungkin Mereka skill-issue.

Atau bisa jadi sekala project mereka sudah besar, but who knows, selama kita tidak terlibat dalam project dan melihat struktur dan enviropment, kita tidak tahu ada apa aja didalamnya.

Proses pembuatan Next.js

Dalam proses pembuatan aplikasi Next.js, Saya copy langsung dari madebyaris.com dan melakukan redesain website yang mirip dengan website gosite.id.

Diatas adalah website dari sponsor kita untuk research dan pembuatan artikel kita ini.

Hasil pembuatan website Next.js

Untuk hasil dari redesain website sendiri dapat dilihat dibawah sini:

https://gosite-madebyaris-com.vercel.app

https://github.com/madebyaris/gosite.madebyaris.com

Gratis dipakai oleh teman-teman, yang penting copyright jangan dihapus ya 😀!

Untuk kodingan dan bagaimana cara deployment mungkin akan kita bahas pada artikel kedepan, untuk saat ini kita akan berfokus bagaimana performa dari Nextjs di VPS murah.

Waktu Proses build

Untuk proses build sekitar 20 detik, dengan total halaman sekitar 38, dan kita juga menggunakan SSR + ISR untuk blognya.

Google Score Pagespeed

Saat ini, skor dari pagespeed sangat penting (selain performa), karena dengan skor yang sempurna, website kita akan lebih disukai oleh Google. Untuk skor sendiri seperti dibawah ini:

Pengunaan RAM dan CPU

Sekarang kita akan membahas tentang pengunaan / resource RAM dan CPU; Apakah berat? Oh tentu ini sangat objective sekali. Jadi ini tergantung dari kodingan Next.js teman-teman sendiri ya.

Pengunaan RAM

Untuk pengunaan RAM sendiri sangat kecil sekali, dari pengunaan saat proses Load test sendiri terhitung sangat kecil sekali:

Pengunaan sekitar 15% dari 1GB atau sekitar 150MB , hitunganya ini cukup kecil sekali, apalagi sifat dari aplikasi NodeJS + Next.js yang termasuk single-thread, sehingga dia tidak akan melakukan spwan ketika banyak request, jadi walau ada 10rb request secara bersamaan, maka pengunaan RAM gak bakal naik signifikan.

Penggunaan CPU

Kalau RAM begitu kecil, lalu bagaimana dengan pengunaan CPU? Berbeda dengan pengunaan RAM yang cukup statis, pengunaan CPU pada Next.js cukup tinggi ketika dilakukan stress-test, ini bisa terjadi karena proses dari single-thread membebani pengunaan CPU, semakin banyak request, semakin besar pengunaan CPU.

Lalu apakah ada solusi dalam mengurangi pengunaan CPU? Kalau mengurangi sepertinya sulit, tapi kita bisa membuat pengunaan CPU menjadi multi-thread sehingga tidak terkena bottleneck karena hanya memggunakan satu thread/CPU saja.

Tapi kita tidak melakukan multiple-thread karena kita ingin berfokus pada “vanilla” performance, sehingga kita dapat melihat dari kecepatan/performa dari sebuah web Next.js

Proses Stress Test

Proses stess test sendiri kita lakukan dengan loader.io, agar lebih comperhensive dan sesuai dengan kejadian di dunia nyata, bukan hanya test performa API “hello world” 🗿 yang banyak di-share pada website-website.

Yang pertama kita lakukan Stress test dengan 200 request per detik (1 request = 1 website load full), hasilnya tidak ada error sama sekali, dan rata-rata response time adalah 363ms.

Ini kalau kita compare dengan website WordPress tanpa optimasi, hanya bisa handle sekitar 50-100 request per detik Saja.

Lalu, Saya ingin mencoba untuk melakukan testing dari 0 – 1200 request per detik:

Dari sini kelihatan ternyata kita hanya bisa menproses request sebanyak 500 request per detik, diatas itu bakal sering error 500 dan Network.

Nah sebelum itu mari kita bahas perbedaan error 500 dan Network:

Error 500 indikasi terjadi karena aplikasi tidak kuat handle request, tapi ini bisa juga indikasi bahwa web server yang kita gunakan sudah mencapai limit.

Error Network itu bisa lebih ke arah infrastruktur internet dari VPS tidak bisa handle proses yang berlebih.

Disini, saya ingin agar tidak terkena bottleneck Error 500, jadi Saya sedikit optimasi Web server (Nginx) agar bisa handle thread lebih dari 700 request dan juga bisa handle multi-request.

Setelah optimasi, sekarang Next.js dapat handle sekitar 600 request per detik tanpa ada error sama sekali.

Dan waktu saya lakukan stress test lagi dengan 0 – 1000 request per detik

Kita dapat handle 90rb lebih request dalam satu menit.

Bisa dilihat network sudah 0 dan juga error 500 juga sudah turun.

BONUS optimasi

Untuk optimasi terakhir, Saya sedikit melakukan “cheat” dengan menggunakan cache Nginx (Yes benar, diatas itu tanpa nginx cache sama sekali):

Disini terlihat bahwa Next.js web sekarang dapat handle 1280 request per detik, kalau kita hitung 24 jam, maka bisa handle 110jt request, wow menarik banget ya.

Terima kasih Sponsor kita Gosite.id

Terima kasih untuk sponsor kita, yakni Gosite.id , dan ownernya Mas Adi Putra, telah meminjamkan VPSnya untuk dilakukan server testing 🫡.

Gosite.id adalah layanan jasa optimasi WordPress
terkemuka di Indonesia,
fokus pada peningkatan kecepatan situs web. Gosite.id menawarkan solusi optimasi speed WordPress,
setup VPS, migrasi WordPress.
Dengan harga terjangkau, Gosite.ID membantu bisnis meningkatkan performa website.

Kesimpulan

Untuk kesimpulan akhir, Next.js dapat digunakan pada VPS murah dengan spesifikasi 1vCPU dan 1GB RAM, dan performanya juga sangat bagus sekali.

Selama kita paham bagaimana cara melakukan optimasi website dan server, kita dapat meng-utilisasi performa sampai mentok.

Tapi, memang perlu dipahami bahwa untuk pengunaan seperti Web E-Commerce dan Dashboard app yang memiliki background service banyak tidak cocok untuk menggunakan VPS dengan spek yang rendah.

Jadi, ini cocok untuk Next.js dengan website ber-tipe Company Profile, Listing, Blog dengan ribuan user.