I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.
Il rendering è il processo di conversione del codice React in HTML. Il metodo di rendering che scegli dipende dai dati con cui stai lavorando e da quanto tieni alle prestazioni.
In Next.js, il rendering è molto versatile. È possibile eseguire il rendering delle pagine lato client o lato server, in modo statico o incrementale.
Dai un'occhiata a come funzionano questi metodi e come ciascuno si comporta.
Rendering lato server
Con il rendering lato server (SSR), quando un utente visita una pagina web, il browser invia una richiesta al server per quella pagina. Il server recupera i dati necessari dal database, se necessario, e li invia insieme al contenuto della pagina al browser. Il browser quindi lo mostra all'utente.
Il browser effettua questa richiesta per ogni collegamento che l'utente fa clic, il che significa che il server elabora la richiesta ogni volta.
Questo può ridurre le prestazioni del sito web. Tuttavia, il rendering lato server è perfetto per le pagine che consumano dati dinamici.
Utilizzare getServerSideProps per ricostruire la pagina ogni volta che un utente lo richiede.
esportarepredefinitofunzioneCasa({ dati }) {
ritorno (
<principale>
// Utilizzodati
</main>
);
}esportareasincronofunzionegetServerSideProps() {
// Recupera i dati dall'API esterna
cost ris = aspetta recupera('https://.../data')
cost dati = aspetta res.json()
// Verrà passato al componente della pagina come oggetti di scena
ritorno { oggetti di scena: { dati } }
}
getServerSideProps funziona solo sul server ed è così che funziona:
- Quando un utente accede direttamente alla pagina, questa viene eseguita al momento della richiesta e la pagina viene pre-renderizzata con gli oggetti di scena che restituisce.
- Quando un utente accede alla pagina tramite un collegamento Next, il browser invia una richiesta al server che lo esegue.
Nella nuova versione, puoi attivare il rendering lato server utilizzando il recupero dinamico dei dati in una pagina o in un layout.
I recuperi di dati dinamici sono richieste fetch() che disattivano specificamente la memorizzazione nella cache impostando l'opzione cache su "no-store".
andare a prendere('https://...', { cache: 'nessun negozio' });
In alternativa, imposta revalidate su 0:
andare a prendere('https://...', { next: { revalidate: 0 } });
Questa funzione è attualmente in versione beta, quindi tienilo a mente. Puoi leggere ulteriori informazioni sui recuperi di dati dinamici nel Next.js 13 documenti beta.
Rendering lato client
Dovresti utilizzare il rendering lato client (CSR) quando devi aggiornare i dati frequentemente o quando non vuoi eseguire il pre-rendering della tua pagina. Puoi implementare la CSR a livello di pagina o di componente. A livello di pagina, Next.js recupera i dati in fase di esecuzione e, una volta eseguito a livello di componente, recupera i dati al momento del montaggio. Per questo motivo, la CSR può contribuire a rallentare le prestazioni.
Usa il useEffect() hook per rendere le pagine sul client in questo modo:
importare {usaStato, usaEffetto} da 'reagire'
funzioneCasa() {
cost [data, setData] = useState(nullo)
cost [isLoading, setLoading] = useState(falso)usaEffetto(() => {
setCaricamento(VERO)andare a prendere('/api/get-data')
.then((res) => res.json())
.then((dati) => {
setData (dati)
setCaricamento(falso)
})
}, [])if (isLoading) ritorno <P>Caricamento...</P>
se (! dati) ritorno <P>Nessun dato</P>
ritorno (
<div>
// Utilizzodati
</div>
)
}
Puoi anche usare il gancio SWR. Memorizza i dati nella cache e li riconvalida nel caso in cui diventi obsoleto.
importare usaSWR da 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
funzioneCasa() {
cost { dati, errore } = useSWR('/api/dati', recuperatore)
se (errore) ritorno <div>Caricamento fallito</div>
se (! dati) ritorno <div>Caricamento...</div>
ritorno (
<div>
// Utilizzodati
</div>
)
}
In Next.js 13, devi utilizzare un componente client aggiungendo la direttiva "use client" all'inizio del file.
"utilizzocliente";
esportarepredefinito () => {
ritorno (
<div>
// Componente client
</div>
);
};
La differenza tra SSR e CSR è che i dati vengono recuperati su ogni richiesta di pagina sul server in SSR mentre i dati vengono recuperati sul lato client in CSR.
Generazione di siti statici
Con la generazione di siti statici (SSG), la pagina recupera i dati una volta durante la fase di compilazione. Le pagine generate in modo statico sono molto veloci e funzionano bene perché tutte le pagine vengono create in anticipo. SSG è quindi perfetto per le pagine che utilizzano contenuti statici come pagine di vendita o blog.
In Next.js, devi esportare la funzione getStaticProps nella pagina di cui desideri eseguire il rendering statico.
esportarepredefinitofunzioneCasa({ dati }) {
ritorno (
<principale>
// Utilizzodati
</main>
);
}esportareasincronofunzionegetStaticProps() {
// Recupera i dati dall'API esterna al momento della compilazione
cost ris = aspetta recupera('https://.../data')
cost dati = aspetta res.json()
// Verrà passato al componente della pagina come oggetti di scena
ritorno { oggetti di scena: { dati } }
}
Puoi anche interrogare il database all'interno di getStaticProps.
esportareasincronofunzionegetStaticProps() {
// ChiamatafunzioneAandare a prenderedatidaBanca dati
cost dati = aspetta getDatiDaDB()
ritorno { oggetti di scena: { dati } }
}
In Next.js 13, il rendering statico è l'impostazione predefinita e il contenuto viene recuperato e memorizzato nella cache a meno che non si imposti l'opzione di memorizzazione nella cache su off.
asincronofunzionegetData() {
cost ris = aspetta recupera('https://.../data');
ritorno res.json();
}
esportarepredefinitoasincronofunzioneCasa() {
cost dati = aspetta getDati();
ritorno (
<principale>
// Utilizzodati
</main>
);
}
Impara di più riguardo rendering statico in Next.js 13 dai documenti.
Generazione incrementale-statica
Ci sono momenti in cui si desidera utilizzare SSG ma si desidera anche aggiornare regolarmente il contenuto. È qui che aiuta la generazione statica incrementale (ISG).
ISG consente di creare o aggiornare le pagine statiche dopo averle create dopo l'intervallo di tempo specificato. In questo modo, non è necessario ricostruire l'intero sito solo le pagine che ne hanno bisogno.
ISG mantiene i vantaggi di SSG con l'ulteriore vantaggio di fornire contenuti aggiornati agli utenti. ISG è perfetto per quelle pagine del tuo sito che consumano dati variabili. Ad esempio, puoi utilizzare ISR per visualizzare i post del blog in modo tale che il blog rimanga aggiornato quando modifichi i post o ne aggiungi di nuovi.
Per utilizzare ISR, aggiungi la prop revalidate alla funzione getStaticProps su una pagina.
esportareasincronofunzionegetStaticProps() {
cost ris = aspetta recupera('https://.../data')
cost dati = aspetta res.json()
ritorno {
oggetti di scena: {
dati,
},
riconvalidare: 60
}
}
Qui, Next.js proverà a ricostruire la pagina quando arriva una richiesta dopo 60 secondi. La richiesta successiva si tradurrà in una risposta con la pagina aggiornata.
In Next.js 13, usa revalidate in fetch in questo modo:
andare a prendere('https://.../data', { next: { revalidate: 60 } });
Puoi impostare l'intervallo di tempo su quello che funziona meglio con i tuoi dati.
Come scegliere un metodo di rendering
Finora hai imparato a conoscere i quattro metodi di rendering in Next.js: CSR, SSR, SSG e ISG. Ciascuno di questi metodi è appropriato per diverse situazioni. La CSR è utile per le pagine che necessitano di dati aggiornati, dove una SEO forte non è un problema. SSR è ottimo anche per le pagine che consumano dati dinamici, ma è più SEO-friendly.
SSG è adatto per le pagine i cui dati sono per lo più statici mentre ISG è il migliore per le pagine contenenti dati che si desidera aggiornare a intervalli. SSG e ISG sono ottimi in termini di prestazioni e SEO poiché i dati sono pre-caricati e puoi memorizzarli nella cache.