Saya pernah ada satu project yang mengharuskan tim frontend kami pakai Vue JS. Akhirnya kami putuskan untuk memakai Nuxt JS sebagai framework Vue JS yang bisa menangani SEO sekaligus mempermudah banyak hal contohnya seperti routing yang kita tinggal bikin berbagai component di folder pages yang nantinya component - component di folder pages itu bisa dijadikan halaman secara otomatis oleh Nuxt.
Menurut saya store atau pengelolaan state melalui Vuex juga dipermudah dengan folder store yang telah disediakan oleh Nuxt. Setiap folder yang dibuat di folder store akan membuat module baru untuk store.
Namun selama kami ngoding atau develop aplikasi pakai Nuxt JS, ada beberapa kendala yang tim kami alami dan saya berniat mau membagikannya. Barangkali solusi dari setiap permasalahan kami bisa membantu teman - teman atau bisa jadi ajang untuk diskusi kalau misalnya teman - teman punya solusi yang lebih canggih.
Masalah pertama: "heap limit allocation failed - javascript heap out of memory"
Masalah pertama yang kami hadapi adalah mendapat error seperti ini. Error ini pertama kali kami dapati ketika sedang menjalankan perintah build di package.json. Kebetulan kami pakai yarn, jadi kami gunakan perintah ini untuk build:
yarn build
Setelah kami cari tahu, ternyata masalah ini tidak hanya bisa dialami oleh aplikasi Nuxt JS saja. Aplikasi React dan Angular pun bisa mengalami hal yang sama. Saya masih belum tahu penyebabnya sampai sekarang. Kami berasumsi kalau RAM atau memory di server yang cuma 2 GB itu terlalu sedikit, tapi di komputer lokal yang RAM 16 GB ternyata juga mengalami hal yang sama.
Akhirnya kami akali dengan edit script di package.json menjadi seperti ini:
"scripts": {
"dev": "node --max-old-space-size=3000 node_modules/nuxt/bin/nuxt.js dev",
"build": "node --max-old-space-size=3000 node_modules/nuxt/bin/nuxt.js build",
"start": "node --max-old-space-size=3000 node_modules/nuxt/bin/nuxt.js start",
}
Masalah pertama akhirnya bisa selesai.
Masalah kedua: "unable to verify the first certificate"
Pada saat deploy ke server dev kami, semua berjalan baik - baik saja. Tapi pada saat deploy ke server client, ada masalah di bagian SSL dimana ketika halaman website di load untuk pertama kali, website jadi error dan muncul pesan error tersebut.
Anehnya, ketika kami buka halaman statis yang gak ada fetch data dari API, bisa, dan ketika pindah halaman atau klik link (nuxt-link) di halaman statis tersebut juga bisa.
Tapi ketika load halaman yang ada fetch data dari API (halaman yang berisi axios yang jalan di asyncData dan fetch) untuk pertama kali (melalui url browser), error.
Masalah ini akhirnya kami selesaikan dengan menonaktifkan SSR, dengan kata lain aplikasi website yang kami kerjakan sekarang menjadi client-side rendering sepenuhnya.
Cara untuk bikin aplikasi Nuxt jadi client-side rendering adalah dengan menambahkan property baru di nuxt.config.js.
export default {
ssr: false,
...
}
Setelah dibikin jadi client-side rendering ternyata aplikasi jadi jauh lebih cepat dan waktu building jadi lebih cepat juga. Karena kalau SSR sebelumnya yang dibuild ada 2 yaitu Server dan Client, sekarang yang dibuild cukup 1 di terminal, yaitu Client.
Kami juga baru tahu bahwa ssr yang dibikin false dapat mempercepat aplikasi, ini bisa dijadikan alternatif kalau mau develop aplikasi Nuxt JS supaya lebih cepat. Yaitu dengan mengubah ssr jadi false untuk sementara waktu. Baru ketika mau dibikin SSR, ssr di nuxt.config.js bisa dibikin true lagi.
Lalu bagaimana dengan aplikasi client kami sebelumnya? Ya mau gak mau memang sekarang jadinya client-side untuk sementara waktu sampai ada konfirmasi lebih lanjut mengenai masalah yang terjadi dengan SSL di server client.
Muncul pertanyaan baru lagi nih, kira - kira aplikasi client-side seperti ini mempengaruhi CEO yang jelek gak ya? Soalnya saya pernah lihat di sosial media kalau Google sekarang udah bisa bikin CEO yang lebih baik untuk aplikasi web yang client-side.
Penjelasan melalui video:
Top comments (0)