• Erwindo Sianipar
    Interaction designer
    Software Engineer
  • blog
    craft
    portfolio
    snippet
    guestbook
    update
    login
ES
Caritas in VeritateMade with love from Jakarta
© 2019-2025 Erwindo Sianipar. All Rights Reserved.
termspoliciescookiesanalytics

Migrasi Web dari Vue.js ke Nuxt.js

Berulang kali migrasi web dari Jekyll hingga ke NuxtJS

avatar
Posted by Erwindo SianiparJan 19, 2021 (4 years ago) · 4 min read
id
EngineeringTech
https://images.unsplash.com/photo-1619082044737-4c99b27fdc16
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

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.

Nuxt.js

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.

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

https://images.unsplash.com/photo-1517503733723-8ea1cf616798

Eror di CocoaPods Xcode 12

The iOS Simulator deployment target error is set to 8.0
Oct 08(5 years ago)
https://images.unsplash.com/photo-1619082044737-4c99b27fdc16

Migrasi Web dari Vue.js ke Nuxt.js

Berulang kali migrasi web dari Jekyll hingga ke NuxtJS
Jan 19(4 years ago)
subtitle
Berulang kali migrasi web dari Jekyll hingga ke NuxtJS
comments
title
Migrasi Web dari Vue.js ke Nuxt.js
slug
migrasi-web-dari-vuejs-ke-nuxtjs
published
Jan 19, 2021
tags
All
Engineering
Tech
image
https://images.unsplash.com/photo-1619082044737-4c99b27fdc16
active
active
lang
id
type
blog
# Trigger command vue-cli-service build npm run build
# Folder structure after generated /dist - index.html - /css - /js
# Trigger command nuxt generate npm run generate
# Folder structure after generated /dist - index.html - /about - index.html - /contact - index.html