Sebelum saya memutuskan untuk memperbarui website pribadi yang saya miliki saat ini, saya sempat berpikir bagaimana cara membuat sebuah website dengan model SPA (Single Page Application) namun memiliki kualitas SEO (Search Engine Optimization) yang bagus. Saya mulai belajar untuk menggunakan bahasa pemrograman javascript untuk membuat hal tersebut dapat direalisasikan, hanya saja saya masih menggunakan bahasa pemrograman lain untuk menjalankan fungsi - fungsi backend yang tidak dapat dilakukan saat ini karena masih kurangnya pengetahuan saya menggunakan javascript.
Mungkin jika anda sudah memahami cara menggunakan library jquery pada pembuatan website, ya sedikit tidaknya masih sama hanya saja dengan cara yang sudah pasti sangat berbeda. Saya memutuskan untuk mulai mencari library atau framework ya karena sejujurnya saya masih bingung apakah reactjs dan vuejs itu adalah sebuah library atau framework hingga pada akhirnya saya memilih vuejs untuk library javascript pertama yang saya pelajari, untuk reactjs sebenarnya saya juga paham namun sayangnya saya lebih cepat memahami vuejs ketimbang reactjs.
Pembuatan website ini dimulai dengan menggunakan vuejs, bermodalkan dokumentasi yang disediakan saya dapat mengerjakannya selama 3 hari dan pastinya saya memiliki masalah yang cukup serius untuk melakukan deploy ke web hosting. VueJS pada dasarnya bekerja pada satu halaman tanpa berpindah - pindah ke halaman lainnya, namun setelah saya coba ternyata hasil production yang telah dibuat tidak bisa berjalan secara sempurna dimana saya membutuhkan permanent link dan pengujian yang saya terima pada pagespeed insight berupa halaman kosong.
Pada saat itu saya baru mengenali istilah server side rendering dan client side rendering, dual hal yang sangat berbeda dimana server side rendering memiliki cara kerja langsung mencetak halaman pada server dan setelah pencetakan halaman selesai maka browser akan menerimanya sedangkan client side rendering memiliki cara kerja mencetak halaman pada browser berdasarkan kerangka HTML yang telah diterima dari server. Memang hal ini bukanlah sebuah masalah jika anda ingin membuat sebuah aplikasi desktop berbasis website namun untuk beberapa website yang menerapkan sistem pre - rendering menggabungkan konsep single page application dengan multiple page application untuk kebutuhan SEO adalah hal yang lumayan buruk. Karena saya menggunakan vuejs dalam membuat situs baru ini maka saya berselancar mencari sesuatu di mesin pencari dan menemukan satu framework yang dapat digunakan untuk membuat website dengan sistem prerendering dan mendukung vuejs.
NuxtJS
Jika pada reactjs ada nextjs maka pada vuejs terdapat nuxtjs, nuxtjs sendiri merupakan sebuah framework berbasis vuejs yang bisa kita gunakan untuk membuat sebuah website berbasis single page application, progressive web apps, desktop application, universal application dan lain sebagainya yang berhubungan dengan vuejs. Nuxtjs juga menggunakan library pendukung seperti vue router, vuex, vue server rendered dan vue meta. Dengan begitu anda tidak perlu lagi memasang library tersebut karena telah terpasang secara default, hal unik lainnya yaitu nuxtjs juga menyediakan starter pack dan module pendukung yang dibuat oleh komunitas untuk mendukung proses pengembangan nuxtjs.
Untuk melihat starter pack dan module tersebut anda bisa melihatnya pada halaman github.
Memulai dengan NuxtJS
Untuk memulai dengan NuxtJS ada beberapa hal yang mungkin anda butuhkan yaitu :
- NPM (Node Packages Manager) atau Yarn
- Server Side Framework (Dibutuhkan jika menggunakan mode universal)
- UI Framework (Optional)
- Testing Framework (Optional)
Beberapa library lain yang mungkin anda butuhkan seperti axios, moment atau nuxt-sitemap dapat anda tambahkan menggunakan packages manager yang anda gunakan dan melakukan konfigurasi pada file nuxt.config.js
NuxtJS tidak dapat berjalan sepenuhnya tanpa server side framework seperti expressjs, koajs ataupun adonisjs pada mode universal atau prerendering, pastikan anda telah menginstallnya pada project yang anda kerjakan dan baca dokumentasi atau gunakan starter pack yang terdapat pada halaman github.
Struktur Direktori
Untuk mempercepat pengembangan aplikasi nuxtjs, disediakan direktori yang memiliki fungsi - fungsi yang berbeda adapun struktur direktorinya adalah sebagai berikut :
Assets
Direktori assets merupakan direktori yang digunakan untuk menyimpan seluruh hal yang berkaitan dengan user interface, pada direktori ini tidak hanya berisikan CSS (Cescading Style Sheet) namun juga dapat berisikan gambar.
Components
Direktori components merupakan direktori yang digunakan untuk menyimpan komponen - komponen halaman, komponen halaman pada direktori ini akan digunakan kembali pada file - file yang terdapat pada direktori pages. Pada direktori ini aksi sync dan async tidak dapat dijalankan.
Layouts
Direktori layouts merupakan direktori yang digunakan untuk membuat sebuah layout pada sebuah halaman, sama halnya dengan direktori components direktori ini juga digunakan pada file - file yang terdapat pada direktori pages.
Middleware
Direktori middleware merupakan direktori yang digunakan untuk membuat sebuah aturan atau fungsi yang dijalankan sebelum sebuah halaman ataupun layout di render pada sisi server. Middleware dapat digunakan secara global pada file nuxt.config.js ataupun secara individu pada file - file yang terdapat pada direktori pages.
Pages
Direktori pages merupakan direktori yang digunakan untuk membuat sebuah halaman, pada direktori ini sync dan async dapat digunakan sehingga anda dapat melakukan pengambilan data terlebih dahulu melalui API yang disediakan dengan bantuan axios atau lainnya sebelum melakukan rendering. Direktori ini juga berfungsi secara otomatis dalam membuat sebuah routing, sehingga anda tidak perlu lagi membuat file routing secara terpisah.
NuxtJS menggunakan nama file atau direktori sebagai path routing untuk melihat cara kerja routing pada nuxtjs anda perlu melihat dokumentasi : https://nuxtjs.org/guide/routing
Plugin
Direktori plugin merupakan direktori yang digunakan untuk memanggil sebuah packages ataupun membuat sebuah fungsi custom sebelum fungsi Vue.JS dijalankan.
Static
Direktori static merupakan direktori yang digunakan untuk menyimpan file - file yang bersifat statis, direktori ini dapat ditempatkan file - file seperti robots.txt, file verifikasi kepemilikan website, favicon dan lain sebagainya.
Store
Direktori store merupakan direktori yang digunakan untuk menggunakan vuex, secara default direktori ini tidak akan digunakan namun anda dapat menggunakannya dengan membuat file dengan nama index.js
Performance NuxtJS
Membuat website dengan nuxtjs atau kasarnya membuat website dengan konsep pre-rendering untuk pertama kali tidak boleh dibandingkan dengan website yang menggunakan konsep server rendering, karena jenisnya yang berbeda atau tidak apple to apple. Tapi jika ditanya apakah ada peningkatan setelah melakukan migrasi dari menggunakan website dengan server side rendering dengan pre-rendering yaitu ada, peningkatannya berbanding lurus dengan konten yang disajikan dan saya sendiri sangat senang bisa menggunakan nuxtjs.
Kesimpulan
Untuk siapapun yang ingin melakukan migrasi dari website berbasis server side rendering ke website berbasis pre-rendering, nuxtjs merupakan salah satu pilihan yang tepat untuk anda yang baru saja memahami penggunaan vuejs dan memiliki sedikit skill pada bahasa pemrograman javascript.
Sumber :
Google Developer
NuxtJS Guide
NuxtJS Directory Guide