Frontend Academy · Pelajaran

Deployment: Statis vs SSR

Hasilkan situs yang sepenuhnya statis dengan nuxt generate, deploy aplikasi SSR ke server Node atau runtime edge, dan konfigurasikan mesin Nuxt nitro.

Deployment: Statis vs SSR adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Nuxt Dapat Dirender di Mana Saja

Nuxt 3 mendukung empat mode deployment: Statis (nuxt generate), SSR (server Node), Edge (Cloudflare Workers, Vercel Edge), dan Hibrida (per rute).

Deployment Statis

nuxt generate melakukan prarender setiap rute menjadi berkas HTML. Deploy folder .output/public ke host statis mana pun (Netlify, Vercel, GitHub Pages, S3).

npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...

# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/

Membuat Rute Dinamis

Untuk rute seperti /blog/[slug], Nuxt perlu mengetahui semua slug. Sediakan semuanya melalui nitro.prerender.routes di config.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
    }
  }
});

// Or auto-discover: Nitro follows links from /, generating any it finds.

Deployment SSR ke Node

nuxt build membuat server Nitro. Deploy ke host Node mana pun (Render, Railway, Fly.io, VPS Anda) dengan menjalankan node .output/server/index.mjs.

npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets

node .output/server/index.mjs # starts on PORT (default 3000)

Nitro — Server Universal

Server Nuxt 3 adalah Nitro — mesin portabel yang menargetkan runtime apa pun: Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify, AWS Lambda. Ganti target dengan nitro.preset.

Deployment Edge (Cloudflare Workers)

Atur preset ke cloudflare-pages atau cloudflare. Build menghasilkan Worker yang berjalan di edge Cloudflare.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: { preset: 'cloudflare-pages' }
});

// Build, then:
npx wrangler pages deploy ./dist

Deployment Edge (Vercel Edge)

Vercel mendeteksi Nuxt secara otomatis dan menggunakan preset yang tepat. Untuk memaksa Edge Runtime: preset: 'vercel-edge'.

Rendering Hibrida

Rute yang berbeda dapat dirender dengan cara yang berbeda. Konfigurasikan dengan routeRules.

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/':           { prerender: true },        // SSG
    '/blog/**':    { isr: 60 },                // ISR every 60s
    '/dashboard/**': { ssr: false },           // SPA (client-only)
    '/admin/**':   { ssr: true }               // SSR (per-request)
  }
});

Memilih Statis atau SSR

Statis: konten jarang berubah, kecepatan maksimal, dan hosting CDN murah (blog, pemasaran, dokumentasi). SSR: konten per pengguna, data dinamis, dan hasil pencarian (dasbor, e-commerce). Mode hibrida memungkinkan Anda mencampurnya per rute.

Variabel Lingkungan

Gunakan runtimeConfig di nuxt.config.ts. public diekspos ke klien; bagian lainnya tetap hanya tersedia di server.

export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '',         // server-only, set via NUXT_API_SECRET env
    public: {
      apiBase: 'https://api.example.com' // accessible client-side
    }
  }
});

// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);

Caching Build di CI

Cache .nuxt/ dan node_modules/ di antara proses CI untuk mempercepat build. Di Vercel/Netlify, hal ini dilakukan secara otomatis.

Pengujian Performa

Setelah deployment, jalankan Lighthouse terhadap URL yang sudah di-deploy — bukan localhost. Gunakan CDN nyata, lokasi edge nyata, dan pembatasan CPU nyata.

Pemeriksaan Singkat

Perintah Nuxt 3 mana yang melakukan prarender semua rute menjadi HTML statis untuk deployment ke CDN seperti Netlify atau Cloudflare Pages?

Ringkasan: Deployment Nuxt

nuxt generate → statis (deploy .output/public). nuxt build → SSR (deploy dengan Node). Preset Nitro menargetkan Cloudflare, Vercel, Netlify, AWS, dan lainnya. routeRules untuk rendering hibrida (prerender, isr, ssr, spa per rute). runtimeConfig untuk variabel lingkungan (public diekspos ke klien). Lakukan pengujian dengan Lighthouse terhadap URL yang sudah di-deploy.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Deployment: Statis vs SSR” gratis?

Ya — teks lengkap “Deployment: Statis vs SSR” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Deployment: Statis vs SSR”?

Hasilkan situs yang sepenuhnya statis dengan nuxt generate, deploy aplikasi SSR ke server Node atau runtime edge, dan konfigurasikan mesin Nuxt nitro. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Deployment: Statis vs SSR” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Perutean Berbasis File dan Impor Otomatis
useFetch dan useAsyncData
Modul Nuxt: Gambar, Autentikasi, i18n
Deployment: Statis vs SSR

← Kembali ke Frontend Academy