0Pricing
Vue Academy · Lezione

Modalità SSR, SSG e SPA a confronto

ssr:true/false, prerender di Nitro, comando generate, rendering ibrido per route.

Modalità SSR, SSG e SPA a confronto è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Panoramica delle modalità di rendering

Nuxt può eseguire il rendering dell'applicazione in tre modi: SSR (il server esegue il rendering a ogni richiesta), SSG (le pagine vengono pre-generate durante la build) e SPA (tutto viene renderizzato nel browser). È persino possibile combinarli per route.

SSR: l'impostazione predefinita

Con ssr: true (l'impostazione predefinita), il server genera l'HTML per ogni richiesta e il client esegue l'hydration. Questo garantisce un primo rendering rapido e una buona SEO, perché i crawler vedono il markup completo.

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

Quando l'SSR dà il meglio

L'SSR è adatto ai contenuti che cambiano spesso o sono personalizzati, come dashboard, feed ed e-commerce con prezzi aggiornati, quando si desidera HTML aggiornato a ogni richiesta.

Modalità SPA

Impostare ssr: false trasforma Nuxt in una single-page app: il server invia uno shell vuoto e il browser esegue il rendering di tutto. È più semplice da ospitare, ma offre una SEO più debole e un primo rendering più lento.

export default defineNuxtConfig({
  ssr: false
})

Quando è adatta una SPA

La modalità SPA è adatta agli strumenti interni e alle applicazioni protette da login, dove la SEO non è importante e si desidera eseguire il deploy come file statici su qualsiasi CDN.

SSG: generazione di siti statici

L'esecuzione di nuxt generate esegue il pre-rendering di ogni pagina in HTML statico durante la build. Il risultato è una cartella di file che può essere ospitata ovunque, senza un server Node.

npx nuxt generate
# outputs static HTML to .output/public

Quando è adatto l'SSG

L'SSG è perfetto per i contenuti che cambiano raramente, come blog, documentazione e siti di marketing. Le pagine sono estremamente rapide e poco costose da distribuire tramite una CDN.

Rendering per route con routeRules

La configurazione routeRules imposta la modalità di rendering per ogni schema di percorso. Si tratta del rendering ibrido: parti diverse della stessa applicazione utilizzano strategie diverse.

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

Opzioni comuni di routeRules

prerender: true genera la pagina durante la build; ssr: false la trasforma in una SPA; swr: n memorizza nella cache il risultato SSR per n secondi (stale-while-revalidate); redirect reindirizza gli utenti altrove.

Rigenerazione statica incrementale

L'opzione isr esegue il pre-rendering alla prima richiesta e memorizza l'output nella cache, rigenerandolo periodicamente. Combina la velocità dell'SSG con l'aggiornamento dell'SSR per le pagine più visitate.

routeRules: {
  '/products/**': { isr: 600 }
}

Scelta della strategia

Inizi con l'SSR per ottenere il miglior compromesso predefinito tra SEO e interattività. Utilizzi l'SSG per i contenuti statici, la SPA per le applicazioni private e routeRules per ottimizzare le singole route quando emergono esigenze di prestazioni.

Verifica rapida

Verifichi la sua conoscenza delle modalità di rendering.

Riepilogo

Ha imparato le modalità di rendering:

  • L'SSR (predefinito) esegue il rendering a ogni richiesta: offre una buona SEO e un primo rendering rapido.
  • ssr:false fornisce una SPA per le applicazioni private.
  • nuxt generate produce un sito SSG statico.
  • routeRules abilita il rendering ibrido: prerender, swr, isr e ssr:false per ogni route.

Domande Frequenti

La lezione «Modalità SSR, SSG e SPA a confronto» è gratuita?

Sì — il testo completo di «Modalità SSR, SSG e SPA a confronto» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Modalità SSR, SSG e SPA a confronto»?

ssr:true/false, prerender di Nitro, comando generate, rendering ibrido per route. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Modalità SSR, SSG e SPA a confronto»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Struttura dei progetti Nuxt 3 e routing basato sui file
  2. Recupero dei dati: useFetch e useAsyncData
  3. Route server e endpoint API di Nuxt
  4. Modalità SSR, SSG e SPA a confronto
← Torna a Vue Academy