Learning Notes #1: Nuxt 3

Nuxt adalah framework open-source untuk membuat full-stack web apps dan website. Nuxt ini menggunakan Vue.js dan menambahkan fitur seperti impor otomatis, routing berbasis file dan masih banyak lagi.

Ini adalah catatan setelah 7 hari mencoba Nuxt.

Rendering

Nuxt mendukung beberapa mode rendering.

1. Universal Rendering (server-side + client-side)

Nuxt menggunakan Universal Rendering secara default. Dengan mode in, server akan mengeksekusi kode JavaScript (Vue.js) di server sehingga menghasilkan dokumen HTML. Sekilas memang mirip seperti saat membuat aplikasi menggunakan PHP dan sebagainya.

Setelah file HTML diterima oleh client. Kode JavaScript akan dieksekusi oleh browser kembali agar halaman menjadi interaktif.

What makes me get stuck on?

window is not defined, terjadi karena server mencoba mengeksekusi kode yang hanya bisa dieksekusi oleh client. Fix:

/* page.vue */
 
<script setup lang="ts">
if (process.browser) {
    /*
    code ...
 
    */
}
</script>

2. Client Side Rendering

Aplikasi akan "dirender" di sisi client. Prosesnya, browser akan mengeksekusi JavaScript untuk membuat sebuah interface. Semua ini terjadi di sisi client sehingga menghemat biaya komputasi karena hanya perlu menghosting file HTML, CSS, dan JavaScript.

Untuk mengaktifkan hanya client-side rendering:

/* nuxt.config.ts */
export default defineNuxtConfig({
  ssr: false
})

Tambahkan ~/app/spa-loading-template.html sebagai tampilan loading SPA (Single Page Application).

Not Good for SEO btw

3. Hybrid Rendering

Dengan Hybrid Rendering kita bisa mengubah atau mengatur mode rendering atau menambahkan aturan untuk setiap rute.

export default defineNuxtConfig({
  routeRules: {
    /* ... */ 
    }
)

Development

Sebelum ke bagian inti, kenalan dulu sama Nitro.

Nitro is an open source TypeScript framework to build ultra-fast web servers. The open engine powering Nuxt and open to everyone. ~ nitro.unjs.io

Nitro diklaim mempunyai banyak fitur, seperti:

• Automatic code splitting
• Hybrid mode
• Hot module reloading
• API routes

dan sebagainya.

Saat $fetch dijalankan di sisi client, maka akan membuat API call ke server. Namun, jika dijalankan di sisi server maka akan langsung mengeksekusi fungsi tertentu.

hmm, belum selesai.. akan terus di update