Apa yang ditambahkan oleh rendering sisi pelayan dengan Nuxt?

Question

Accepted Answer

**Nuxt** adalah meta-framework untuk Vue (setara dengan Next.js untuk React). Ia menambahkan **rendering sisi pelayan (SSR)**, perutean berbasis file, dan kemampuan full-stack di atas Vue — mengubah Vue dari perpustakaan sisi klien menjadi kerangka kerja aplikasi lengkap. ## Mengapa ini penting ```text Plain Vue SPA: server sends an empty

+ JS bundle → browser downloads JS, runs Vue, THEN renders content → slow first paint, and crawlers may see a blank page (bad SEO) Nuxt SSR: server renders the full HTML and sends it ready-to-view → fast first paint, content visible immediately, great SEO → Vue then "hydrates" it to make it interactive ``` SSR berarti server menghasilkan HTML lengkap per permintaan, jadi pengguna dan mesin pencari mendapatkan konten nyata secara langsung, kemudian Vue mengambil alih (hidratasi) untuk interaktivitas. ## Apa yang disediakan Nuxt ```text ✓ Rendering modes per route: SSR, SSG (static), ISR, or SPA — your choice ✓ File-based routing — pages/ folder = routes (no manual router config) ✓ Auto-imports — components/composables imported automatically ✓ Server routes / API — server/api/ for backend endpoints (full-stack) ✓ Data fetching — useFetch / useAsyncData that work on server AND client ✓ SEO helpers — useHead/useSeoMeta for meta tags ``` ## Contoh perutean berbasis file ```text pages/index.vue → / pages/about.vue → /about pages/users/[id].vue → /users/:id (dynamic) ``` ## Pengambilan data universal ```vue ``` `useFetch`/`useAsyncData` mengambil di server selama SSR (jadi data ada di HTML awal) dan menghindari pengambilan ganda pada hidratasi — kemudahan utama Nuxt. ## Kefleksibilan mode rendering ```text SSR → fresh HTML per request (dynamic, personalized, SEO) SSG → pre-rendered at build (fastest, for mostly-static content) Hybrid → choose per route via routeRules ``` ## Mengapa ini penting Nuxt membawa ke Vue apa yang Next.js bawa ke React: SSR/SSG untuk **SEO dan cat pertama yang cepat**, perutean berbasis file, lapisan server untuk aplikasi full-stack, dan konvensi yang masuk akal (impor otomatis, pengambilan data universal). Untuk situs konten, e-commerce, atau apa pun yang memerlukan SEO dan pemuatan cepat, SPA Vue biasa tidak cukup — rendering sisi pelayan Nuxt adalah jawabannya, sambil tetap memungkinkan Anda memilih mode rendering optimal per rute.