Frontend Academy · Pelajaran

Pelancaran: Statik berbanding SSR

Jana tapak yang sepenuhnya statik dengan nuxt generate, lancarkan aplikasi SSR pada pelayan Node atau persekitaran edge, dan konfigurasikan enjin nitro Nuxt.

Pelajaran 4 daripada 414 langkah

Pelancaran: Statik berbanding SSR ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Nuxt Boleh Dipaparkan di Mana-mana

Nuxt 3 menyokong empat mod pelancaran: Statik (nuxt generate), SSR (pelayan Node), Pinggir (Cloudflare Workers, Vercel Edge), Hibrid (mengikut laluan).

Pelancaran Statik

nuxt generate memprapaparkan setiap laluan kepada fail HTML. Lancarkan direktori .output/public pada mana-mana hos statik (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/

Menjana Laluan Dinamik

Untuk laluan seperti /blog/[slug], Nuxt perlu mengetahui semua slug. Sediakan semuanya melalui nitro.prerender.routes dalam konfigurasi.

// 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.

Pelancaran SSR ke Node

nuxt build mencipta pelayan Nitro. Lancarkan pada mana-mana hos Node (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 — Pelayan Sejagat

Pelayan Nuxt 3 ialah Nitro — enjin mudah alih yang menyasarkan mana-mana persekitaran masa jalan: Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify, AWS Lambda. Tukar sasaran dengan nitro.preset.

Pelancaran Pinggir (Cloudflare Workers)

Tetapkan praset kepada cloudflare-pages atau cloudflare. Binaan menghasilkan Worker yang berjalan pada pinggir Cloudflare.

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

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

Pelancaran Pinggir (Vercel Edge)

Vercel mengesan Nuxt secara automatik dan menggunakan praset yang betul. Untuk memaksa Persekitaran Masa Jalan Pinggir: preset: 'vercel-edge'.

Pemaparan Hibrid

Laluan yang berbeza boleh dipaparkan dengan cara yang berbeza. 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 Statik berbanding SSR

Statik: kandungan jarang berubah, kelajuan maksimum dan pengehosan CDN yang murah (blog, pemasaran, dokumentasi). SSR: kandungan mengikut pengguna, data dinamik dan hasil carian (papan pemuka, e-dagang). Hibrid membolehkan anda mencampurkannya mengikut laluan.

Pemboleh Ubah Persekitaran

Gunakan runtimeConfig dalam nuxt.config.ts. public didedahkan kepada klien; selebihnya kekal pada pelayan sahaja.

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);

Penyimpanan Binaan dalam Cache CI

Simpan .nuxt/ dan node_modules/ dalam cache antara pelaksanaan CI untuk mempercepat binaan. Pada Vercel/Netlify, proses ini berlaku secara automatik.

Pengujian Prestasi

Selepas pelancaran, jalankan Lighthouse terhadap URL yang telah dilancarkan — bukan localhost. CDN sebenar, lokasi pinggir sebenar dan pendikitan CPU sebenar.

Semakan Pantas

Perintah Nuxt 3 manakah yang memprapaparkan semua laluan kepada HTML statik untuk dilancarkan pada CDN seperti Netlify atau Cloudflare Pages?

Jawab dalam pelajaran interaktif

Rumusan: Pelancaran Nuxt

nuxt generate → statik (lancarkan .output/public). nuxt build → SSR (lancarkan dengan Node). Praset Nitro menyasarkan Cloudflare, Vercel, Netlify, AWS dan sebagainya. routeRules untuk pemaparan hibrid (prerender, isr, ssr, spa mengikut laluan). runtimeConfig untuk pemboleh ubah persekitaran (public didedahkan kepada klien). Uji dengan Lighthouse terhadap URL yang telah dilancarkan.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pelancaran: Statik berbanding SSR” percuma?

Ya — teks penuh “Pelancaran: Statik berbanding SSR” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pelancaran: Statik berbanding SSR”?

Jana tapak yang sepenuhnya statik dengan nuxt generate, lancarkan aplikasi SSR pada pelayan Node atau persekitaran edge, dan konfigurasikan enjin nitro Nuxt. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Pelancaran: Statik berbanding SSR” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Penghalaan Berasaskan Fail dan Import Automatik
useFetch dan useAsyncData
Modul Nuxt: Imej, Pengesahan dan i18n
Pelancaran: Statik berbanding SSR

← Kembali ke Frontend Academy