Vue Js to Nuxt Js Project

Mengingat kembali pengalaman saya yang dulunya membangun sebuah situs portal berita dimana, yang pada awalnya saya membangun menggunakan vue js yang merupakan framework javasript.

Pada awal progress project hingga selesai tentu saya tidak memiliki kendala yang cukup rumit untuk proses pengerjaan-nya .

Namun, saya mulai memiliki masalah yang menurut saya cukup merepotkan setelah saya mengupload ke hosting, atau sering kita bilang deployed. Masalahnya untuk bagian urusan SEO vue js bukanlah ahlinya. Setelah saya baca berbagai referehensi , saya kemudian memutuskan untuk migrasi project saya sepenuhnya ke dalam nuxt js. Perlu kita ketahui dimana VueJS SPA itu model renderingnya secara client atau CSR (Client Side Rendering) dan NuxtJS itu SSR (Server Side Rendering). Lalu bagaimana perbedaan keduanya ?

untuk SSR, respon server Anda ke browser adalah HTML halaman kita yang siap untuk dirender, sedangkan untuk CSR browser mendapatkan dokumen yang cukup kosong dengan tautan ke javascript kita.

Dengan demikian, berarti browser Anda akan mulai merender HTML dari server Anda tanpa harus menunggu semua JavaScript diunduh dan dijalankan. Dalam kedua kasus tersebut, VueJS SPA perlu diunduh dan melalui proses yang sama untuk membangun dom virtual dan melampirkan acara untuk membuat halaman interaktif.

Untuk SSR, pengguna dapat mulai melihat halaman saat semua itu terjadi. Untuk dunia CSR, Anda harus menunggu hingga semua hal di atas terjadi dan kemudian memindahkan dom virtual ke dom browser agar halaman dapat dilihat.

Untuk pengaruhnya sendiri , Untuk perenderan sisi server, semua konten HTML ada dalam kode sumber yang berarti mesin telusur dapat meminta, dan mengindeks-nya segera. Menghasilkan waktu yang lebih cepat untuk benar-benar muncul dan memberi peringkat di hasil penelusuran.

Untuk perenderan sisi klien, HTML yang perlu di indeks hanya diperlihatkan saat JS dirender sepenuhnya di sisi klien. Jadi, dengan sistem dua gelombang yang digunakan Google saat ini, dibutuhkan waktu beberapa jam hingga satu minggu sebelum konten dapat di rayapi, di indeks, dan mulai diberi peringkat dalam hasil pencarian.

Perlu kita ketahui terlebih dahulu bahwasanya nuxt js merupakan turunan dari vue js, sehingga tidak heran jika keduanya memiliki beberapa kesamaan baik dari segi folder, routing, dan codingan.

Untuk migrasi project kita tentunya kita harus membuat project nuxt terlebih dahulu . Untuk langkah-langkah -nya bisa di lihat di bawah ini.

untuk membuat project dalam nuxt kita bisa memiliki beberapa cara misalkan jika teman- teman memulainya menggunakan NPX, kamu bisa menggunakan cara ini.

npx create-nuxt-app <nama-project>

Kemudian jika menggunakan NPM kamu bisa menggunakan cara ini.

npm init nuxt-app@latest <nama-project>

Atau bisa menggunakan cara ini jika kamu ingin create project menggunakan yarn

yarn create nuxt-app <nama-project>

jika project nya sudah ter install maka kamu akan melihat beberapa kemiripan dari struktur folder dari vue dan nuxt. misalkan folder store, components, dan folder views.

Untuk folder store dan ika kamu tidak menggunakan Vuex dalam proyek VueJs kamu, kamu dapat melewati langkah ini. Kalau ada, kamu dapat menyalin isi folder store kamu ke /store di proyek nuxt kamu, misalnya file index.js.

Untuk folder Components , saya rasa isinya hampir sama . Jadi kamu bisa langsung memindahkan semua file yang ada dalam component vue ke nuxt.

Dan Untuk folder views disini juga juga file dari keduanya hampir sama dimana di folder /page yang nantinya untuk meletakkan semua Ui dari website kita.

Untuk penamaan kadang ada yang dibawa dari vue ke nuxt bisa kamu sesuaikan dengan kebutuhan kamu.

Yang berbeda signifikan mungkin hanya pada bagian routing nya saja dimana di dalam vue js kita membuat secara otomatis, namun dalam nuxt js dia akan di generate otomatis oleh sistem. untuk tutorial-nya sendiri saya sudah membuatnya di

Custom Router di Nuxt Js

dan yang terakhir yang penting kamu ketahui di dalam nuxt kamu bisa mendeklarasikan file kamu secara global, mulai dari setting environment, css, dan banyak lagi tentunya sesuai kebutuhan kamu.

untuk mendeklarasikan atau mendaftarkan file secara global kamu bisa ke file nuxt.config.js.

misalkan untuk mendeklarasikan css secara global kamu bisa mengikuti langkah di bawah ini.

export default {
  css: [
      '~/assets/css/main.css',
      '~/assets/css/animations.scss'
     ]
}

atau untuk project yang sedang production atau release, kamu juga bisa meletakkan di folder ini, misalkan .

export default {
  dev: process.env.NODE_ENV !== 'production'
}

atau setting environment variabel seperti yang saya jelaskan sebelumnya.

export default {
  env: {
    baseURL: process.env.BASE_URL
  }
}

Jadi, seperti itu dulu untuk pembahasan kita kali ini , jika memang artikel ini membantu dalam pemecahan masalah teman-teman , kamu bisa membelikan apresiasi dengan cara mengikuti dan memberikan tombol like dalam postingan ini.