Salta ai contenuti

Modalità di rendering

Per essere mostrato sul web, il tuo progetto Astro deve prima essere renderizzato.

Le pagine, le route, e gli API endpoint possono essere pre-renderizzati a build time o renderizzati on demand da un server quando viene richiesta una route.

Grazie alle Isole Astro è possibile fare uso del rendering lato client se necessario.

In Astro, la maggior parte del processing avviene sul server anziché nel browser. Questo rende il tuo sito o app più veloce rispetto al rendering lato client quando viene visualizzato su dispositivi meno potenti o su connessioni internet più lente. L’HTML renderizzato sul server è veloce, SEO friendly, e accessibile di default.

Modalità di output per il server

Sezione intitolata Modalità di output per il server

Puoi configurare come renderizzare le pagine nella tua configurazione di output.

Pagine pre-renderizzate

Sezione intitolata Pagine pre-renderizzate

La modalità di rendering di default è output: 'static', che crea l’HTML per tutte le tue route a build time.

In questa modalità, il tuo sito viene pre-renderizzato per intero e il server avrà quindi tutte le pagine già pronte per l’invio al browser. Ogni visitatore riceverà lo stesso documento HTML, e sarà necessario un rebuild completo del sito per aggiornare il contenuto della pagina. Questo metodo è anche conosciuto come static site generation (SSG) (generazione statica del sito).

Di default, un progetto Astro è configurato per essere pre-renderizzato a build time (generato staticamente) per essere il più leggero possibile per il browser. Il browser non deve attendere la generazione di alcun documento HTML, perché in questa modalità il server non genera mai pagine on-demand. Il tuo sito non dipenderà dalle performance di una fonte dati backend, e una volta buildato sarà sempre disponibile ai visitatori come sito statico fintantoché il server sarà in funzione.

Nei siti statici è possibile includere le Isole Astro per avere componenti UI interattivi (o anche intere app embedded e renderizzate lato client!) scritte nel framework UI che preferisci in una pagina statica e pre-renderizzata.

È possibile utilizzare l’API di Transizione delle Viste di Astro anche in modalità static per animare e preservare lo stato durante la navigazione tra le pagine. I siti statici possono anche utilizzare il middleware per intercettare e trasformare, a partire da una richiesta, i dati della risposta.

Pagine renderizzate on-demand

Sezione intitolata Pagine renderizzate on-demand

Le altre due modalità di output di astro possono essere configurate per abilitare il rendering on-demand per tutte o alcune delle tue pagine, route o API endpoint:

  • output: 'server' è pensato per siti altamente dinamici, con tutte o la maggior parte delle route on-demand.
  • output: 'hybrid' è pensato per siti principalmente statici, con alcune route on-demand.

Dal momento che queste route vengono generate nell’istante in cui vengono visitate, è possibile personalizzarle per ogni visitatore. Ad esempio, una pagina renderizzata on-demand può mostrare a un utente loggato le informazioni relative al suo account, oppure visualizzare dati appena aggiornati senza richiedere un rebuild completo del sito. Il rendering on-demand sul server al momento della richiesta (request time) è anche conosciuto come server-side rendering (SSR) (rendering lato server).

Consider enabling server or hybrid mode in your Astro project if you need the following:

Prendi in considerazione l’abilitazione della modalità server o hybrid nel tuo progetto Astro se necessiti di:

  • Endpoint API: crea pagine specifiche che funzionano come endpoint API per task come l’accesso al database, l’autenticazione e l’autorizzazione, mantenendo i dati sensibili nascosti al client.

  • Pagine protette: limita l’accesso a una pagina in base ai privilegi dell’utente, gestendo l’accesso dell’utente sul server.

  • Contenuto che cambia frequentemente: genera una singola pagina senza richiedere un rebuild statico del tuo sito. Ciò torna utile quando il contenuto di una pagina viene aggiornato frequentemente, ad esempio per mostrare i dati da una API invocata dinamicamente con fetch().

Sia in modalità di output server che in modalità hybrid avrai la possibilità di includere le Isole Astro per avere componenti UI interattivi (o anche intere app embedded e renderizzate lato client!) scritte nel framework UI che preferisci. Grazie al middleware e all’API di Transizione delle Viste di Astro per le animazioni e il mantenimento dello stato durante la navigazione tra le route puoi creare app altamente interattive.