Migrasi Web dari Vue.js ke Nuxt.js
Berulang kali migrasi web dari Jekyll hingga ke NuxtJS
Posted by Erwindo SianiparJan 19, 2021 (6 years ago) · 7 min read
Photo by Maksim Shutov on Unsplash
Versi sebelum migrasi
Pada postingan sebelumnya, saya juga telah menulis alasan-alasan saya memigrasi website ini dari yang sebelumnya menggunakan Jekyll sebagai Static Site Generator (SSG) dan menulis ulang baris kode yang baru ke Vue.js.
Kali ini saya memigrasikan lagi dari Vue.js ke Nuxt.js. Nuxt.js ini bisa jadi, bahkan hampir sama dengan Jekyll yaitu bisa menjadikan sebuah website menjadi statis. Jika Vue.js memiliki konsep Single Page Application (SPA) dan Client Side Rendering (CSR) maka Nuxt.js ini hadir dengan Server Side Rendering (SSR) juga CSR dan SPA.
SSR di sini artinya proses render untuk kebutuhan tampilan dapat dilakukan di sisi server tempat di mana aplikasi website di hosting, Nuxt.js juga dapat melakukan CSR jika dibutuhkan untuk memproses data untuk keperluan di sisi klien. Berbeda dengan SPA, proses terjadi di sisi peramban klien.
Alasan memilih Nuxt.js
Alasan lainnya untuk memilih Nuxt.js adalah karena alasan Search Engine Optimization (SEO). Vue.js dikenal kurang ramah terhadap SEO karena pemrosesan data terjadi di sisi klien.
Walaupun robot Crawler Google sudah dapat membaca website dengan SPA, tetapi tetap saja dengan menggunakan SSR adalah pilihan yang terbaik untuk kebutuhan SEO, bukan hanya untuk robot Crawler Google, namun juga untuk semua robot mesin pencari atau disebut website Spider.
Hal lainnya adalah Nuxt.js ini dapat berjalan baik di shared hosting dan hosting statis seperti Github Pages, berbeda dengan Vue.js karena memerlukan peladen (sever) yang di dalamnya harus terpasang Node.js.
Perbedaan Vue.js dan Nuxt.js
Perbedaan terlihat saat menjalankan build pada aplikasi Vue.js dan Nuxt.js.
Vue.js
# Trigger command vue-cli-service build npm run build
Dari perintah di atas, Vue.js akan membuat sebuah folder
dist (dapat diganti sesuai dengan kebutuhan) dan berada di dasar folder di mana aplikasi Vue.js berada, dan di dalam folder tersebut akan terdapat satu fail index.html dan folder assets.Karena Vue.js ini adalah SPA, maka yang akan terjadi hanya ada satu fail untuk dasar aplikasi website dan sisanya adalah folder untuk aset.
# Folder structure after generated /dist - index.html - /css - /js
Nuxt.js
# Trigger command nuxt generate npm run generate
Dari perintah di atas, Nuxt.js akan menciptakan sebuah folder
dist (juga dapat diganti sesuai dengan kebutuhan) dan berada di dasar folder aplikasi Nuxt.js berada, dan di dalam folder tersebut akan terdapat fail dan folder sesuai jumlah halaman yang dibuat.Jika dalam aplikasi website Nuxt.js memiliki beberapa halaman, maka halaman statis yang akan tercipta juga sebanyak halaman yang telah dibuat. Di bawah ini adalah contoh jika aplikasi website Nuxt.js yang dibuat memiliki tiga halaman yaitu
index about dan contact.# Folder structure after generated /dist - index.html - /about - index.html - /contact - index.html
Konklusi penggunaan
Kelebihan Vue.js di bandingkan dengan Nuxt.js akan terdapat lebih sedikit fail dan folder dibandingkan dengan Nuxt.js. Namun walaupun Nuxt.js sendiri dapat membuat halaman statis, namun transisi antar halaman tidak kalah jika dibandingkan SPA atau PWA pada umumnya.
More from Erwindo SianiparSee all
