Implement Single Page Application in Hugo with Turbolinks

By Aliif Arief · 2 minutes

Halo semua,

Beberapa bulan belakangan saat saya bingung ingin membangun website ini menggunakan framework apa saya menemukan sebuah library menarik yaitu Turbolinks yang mana dengan menggunakan library ini semua link navigasi halaman yang menggunakan tag <a href=/> tidak akan membuat halaman website kita ter reload ulang secara full yang artinya akan bersifat seperti single page application sama seperti bila kita menggunakan react dengan react router atau jika kita menggunakan vue dengan vue router atau biasanya bila menggunakan nextjs akan menggunakan next link.

Tentunya setelah menemukan library tubolinks saya pun langsung mengimplementasikan ke dalam website ini dan akhirnya voila website ini pun loading untuk berganti halaman pun semakin cepat, setelah menggunakan library ini saya semakin mantap untuk stay menggunakan hugo untuk personal website ini.

perlu diketahui bahwa project turbolinks ini sudah di archived dan tidak di maintain lagi namun masih bisa digunakan dengan baik.

Untuk menggunakan library turbolinks ini sebenarnya ada beberapa metode yang paling best practice adalah dengan menginstallnya dengan npm namun karena saya ingin pure hugo saja maka saya hanya mengembed nya dengan kode ini:

<script src=https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.0.0/turbolinks.js defer></script>

Letakkan kode diatas sebelum penutup tag </head> lalu voila maka website kita pun menjadi single page application dengan instan.

Mungkin akan ada beberapa dom terutama untuk operasi DOM yang menggunakan javascript dan beberapa javascript lainnya dalam website kita yang akan mengalami error karena memang untuk event listener turbolinks ini berbeda caranya dengan event listener bawaan browser karena itu saya lebih menyarankan untuk menggunakan npm dalam instalasi untuk penggunaan yang lebih flexible atau mengunduh scriptnya dan mengcustom sesuai dengan keinginan anda, anda dapat membaca dokumentasi library turbolinks lebih lanjut disini.

Alasan saya menggunakan turbolinks karena ini dapat digunakan tanpa menggunakan npm dan script cdn nya lebih mudah untuk dimengerti oleh saya pribadi bila anda ingin library sejenis ini yang lebih baru dan stable anda dapat menggunakan turbo hotwired yang memang alternatif baru yang disarankan oleh turbolinks.

----